如何在 Angular 8 中使用本地字体系列？

我的 /assets/font 文件夹中有一些自定义字体，假设它是“ITC Charter Com Black”，我有四种文件：.eot .svg .tff .woff.

以及如何在我的项目中使用这些字体？ 我累了：font-family: 'ITC Charter Com Black';

这不是工作。

使用自定义字体之前的设置

Step 1:在文件夹中src/assets新建一个文件夹fonts所以新的路径看起来像src/assets/fonts.

Step 2:将您的自定义字体 .ttf 文件放入其中src/assets/fonts所以新的路径看起来像src/assets/fonts/custom_font.ttf.

Step 3:现在在文件夹中fonts创建一个新的 .css 文件，例如font-file.css所以现在的路径看起来像src/assets/fonts/font-file.css。在这个文件里面写这个，

@font-face {
  font-family: "my_custom_font";
  src: url("./custom_font.ttf") format("opentype");
}

经过三个步骤后，您的目录结构应该是这样的，

src -
     |
      - ...   //other folders
     | 
      - assets // assets folder
              |
               -fonts // fonts folder
                     |
                      -font-file.css //.css file
                     |
                      -custom_font.ttf //.ttf file

Step 4:去你的angular.json文件并在第一个下options:{}你将拥有的属性styles:[]。在此粘贴您的完整路径font-files.css such as

"options": {
            ...,
            "styles": [
              "src/styles.scss",
              "src/assets/fonts/font-file.css" //the path to your font-file.css which we defined earlier in step3
            ]

          }

使用自定义字体

现在您可以轻松使用新添加的自定义字体，例如，

body {
    ...
    font-family: 'my_custom_font', 'arial', sans-serif;
}