angular - 如何将新字体导入项目 - Angular 5

Question

我想将新字体导入到我的 Angular 5 项目中。

我试过:

1) 复制文件到assets/fonts/

2) 将其添加到 .angular-cli.json 样式

但我已经检查过该文件不是 .css，它是一个像 .exe 一样工作的 .otf(它是一个安装程序)所以我真的不知道如何导入它。有什么想法吗？

Answer 1

您需要将字体文件放在assets文件夹中(可能是assets中的fonts子文件夹)，并在样式中引用它:

@font-face {
  font-family: lato;
  src: url(assets/font/Lato.otf) format("opentype");
}

完成后，您可以在任何地方应用此字体，例如:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'lato', 'arial', sans-serif;
}

您可以将 @font-face 定义放在全局 styles.css 或 styles.scss 中，这样您就可以引用到任何地方的字体 - 即使在您的组件特定的 CSS/SCSS 中。 styles.css 或 styles.scss 已在 angular-cli.json 中定义。或者，如果你愿意，你可以创建一个单独的 CSS/SCSS 文件，并在 angular-cli.json 中将其与 styles.css 或 styles.scss 一起声明，例如:

"styles": [
  "styles.css",
  "fonts.css"
],