Vue.js 将新字体文件添加到用户界面

我在Vue.js中工作，我在一个文件夹中有一些字体文件，应该用于该项目。如何将这些字体添加到网站的UI？我需要安装它们吗？或者我只是将实际文件添加到vue.js模板的HTML文件中？

只需在css文件中使用它们，就像在任何网页或单个文件组件的样式部分中一样

例如

html，正文{font:17px/20px Arial}

如果字体文件不是像Arial这样的系统字体，则需要提供该字体文件的路径。如果文件来自web cdn（如google字体），则提供链接，如果是本地文件，则提供文件路径。您可以通过

@font-face

规则执行这两项操作

@font-face{
字体系列：“SomeName”；
src:url（“./font/OpenSans常规webfont.woff”）格式（“woff”）；
}
html，正文{
字体：17px/20px SomeName；
}

注意

url

前面的点。它代表相对路径。您可以使用

/foo/bar

“从该位置”，使用

。/

进入文件夹，并根据您的配置，

@/

从项目src文件夹开始。因此，您可以使用例如

@/font/myfont.ttf

查找字体，其中src文件夹中有一个字体文件夹

或者如果是cdn字体

@font-face{
字体系列：“比特流Vera衬线粗体”；
src:url（“https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf");
}

您能告诉我如何将SVG导入我的标题组件吗？当然可以，但我没有足够的信息来了解您的意思。试着问一个单独的问题。简而言之，这里有一些选项a）签出，b）只需将其包含在模板中，svg兼容html，您可以将其粘贴进去，c）构建一个简单的图标系统，如果它是针对图标而不是徽标。以下是问题的链接：