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

Question

我在/assets/font文件夹中有一些自定义字体，假设字体名为"ITC Charter Com Black"，而我得到了四种类型的文件：.eot、.svg、.tff和.woff。

那么我该如何在我的项目中使用这些字体呢？我尝试过：font-family: 'ITC Charter Com Black';，但它并没有生效。

- Shinji035

---

@David 更像是“资产”。 - user4676340

请编辑大卫，我会删除我的 :) - user4676340

你需要确保将这些文件添加到 angular.json 文件的 assets 部分中，然后你可以像下面的答案和这里所建议的那样，在 css 中使用 @font-face 引用它们：https://dev59.com/3lUL5IYBdhLWcg3wvqLA - David

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，现在路径变成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

第四步: 打开你的 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;
}

- iCantC

Answer 2

在style.css中添加font-family，如下所示 -

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

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

- piedpiper