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

Question

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

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

这是行不通的。

Answer 1

使用自定义字体前的设置

步骤 1：在文件夹中src/assets创建一个新文件夹，fonts使新路径看起来像src/assets/fonts.

第 2 步：将自定义字体 .ttf 文件放入其中，src/assets/fonts这样新路径看起来像src/assets/fonts/custom_font.ttf.

第 3 步：现在在文件夹中fonts创建一个新的 .css 文件，例如font-file.css现在路径看起来像.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;
}

Answer 2

像这样在 style.css 中添加 font-family -

@font-face {
  font-family: 'appfont';
  src: url('/fonts/TitilliumWeb-Regular.ttf');
}

body {
  font-family: 'appfont', sans-serif;
}