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

发布时间：2020-12-17 08:53:38 所属栏目：安全来源：网络整理

导读：我想将一个新字体导入我的Angular 5项目. 我试过了： 1)将文件复制到assets / fonts / 2)将其添加到.angular-cli.json样式但是我已经检查过该文件不是.css,它是一个.otf就像.exe(它是一个安装程序),所以我真的不知道如何导入它.任何的想法？您需要将字体文

我想将一个新字体导入我的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"
],

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!