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

Question

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

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

Answer 1

使用自定义字体前的设置

第一步:在文件夹 src/assets创建一个新文件夹 fonts所以新路径看起来像 src/assets/fonts .

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

第 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

第 4 步:转到您的 angular.json文件并在第一个 options:{} 下您将拥有的属性 styles:[] .在此粘贴完整路径到您的 font-files.css如

"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;
}