Question

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

以及如何在项目中使用这些字体？我很累：.woff

这是行不通的。

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

步骤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-face {
  font-family: 'appfont';
  src: url('/fonts/TitilliumWeb-Regular.ttf');
}

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

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

2 个答案: