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

Question

我想将一个新字体导入我的Angular 5项目.

我试过了:

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

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

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

Answer 1

您需要将字体文件放在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"
],

Answer 2

你可以尝试创建与字体面的字体的CSS(如解释在这里)

步骤1

创建一个带有font face的css文件并将其放在某处,就像在 assets/fonts

customfont.css

@font-face {
    font-family: YourFontFamily;
    src: url("/assets/font/yourFont.otf") format("truetype");
}

第2步

将css添加到styles配置中的.angular-cli.json

"styles":[
 //...your other styles
 "assets/fonts/customFonts.css"
 ]

ng serve执行此操作后不要忘记重新启动

第3步

在代码中使用该字体

component.css

span {font-family: YourFontFamily; }

Answer 3

答案在上面已经存在，但我想添加一些东西..您可以在@font-face中指定以下内容

@font-face {
  font-family: 'Name You Font';
  src: url('assets/font/xxyourfontxxx.eot');
  src: local('Cera Pro Medium'), local('CeraPro-Medium'),
  url('assets/font/xxyourfontxxx.eot?#iefix') format('embedded-opentype'),
  url('assets/font/xxyourfontxxx.woff') format('woff'),
  url('assets/font/xxyourfontxxx.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}

所以你可以只指出你已经选择的字体系列名称

注意：字体粗细和字体样式取决于您的 .woff .ttf ... 文件