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

前端之家收集整理的这篇文章主要介绍了如何将新字体导入项目 – Angular 5前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想将一个新字体导入我的Angular 5项目.

我试过了:

1)将文件复制到assets / fonts /

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

但是我已经检查过该文件不是.css,它是一个.otf就像.exe(它是一个安装程序),所以我真的不知道如何导入它.任何的想法?

您需要将字体文件放在assets文件夹中(可能是资源中的字体子文件夹)并在样式中引用它:
@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"
],

猜你在找的Angularjs相关文章