将新字体文件添加到 UI

Question

我在 Vue.js 工作，我在一个文件夹中有几个字体文件，我应该将它们用于该项目。我怎样才能将这些字体添加到网站的 UI？我必须安装它们吗？或者我会简单地将实际文件添加到 vue.js 模板的 HTML 文件中吗？

Answer 1

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

例如html, body { font: 17px/20px Arial }

如果不是像 Arial 这样的系统字体，您将需要提供字体文件的路径。如果文件来自网络 cdn，如 google 字体，您提供 link，如果它是本地文件，则提供文件路径。您可以通过 @font-face 规则来完成这两项操作。 See moz docs for more info.

@font-face {
  font-family: "SomeName";
  src: url("./fonts/OpenSans-Regular-webfont.woff") format("woff");
}

html, body {
  font: 17px/20px SomeName;
}

注意url前面的点。它代表相对路径。您可以使用 ./foo/bar 代替 "from this location"，../ 向上一个文件夹，并且根据您的配置，@/ 从项目 src 文件夹开始。所以你会寻找一种字体，例如@/font/myfont.ttf 在 src 文件夹中有一个字体文件夹。

或者cdn字体的话

@font-face {
  font-family: "Bitstream Vera Serif Bold";
  src: url("https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf");
}

将新字体文件添加到 UI

Add new font file to UI

fonts

vue.js