31

我试图在我的项目中包含一些自定义字体但没有成功。

注意：我正在使用 angular-cli：angular-cli@1.0.0-beta.21

  1. 我把字体放在文件夹里

    src/assets/fonts/Roboto-Regular.tff

  2. 我加入src/styles.css

    @font-face {
  font-family: "Roboto-Regular";
  src: url("./assets/fonts/Roboto-Regular.tff");
}

  3. 我在组件中使用它.scss

    font-family: "Roboto-Regular";

  4. 我收到 404 错误：

    Cannot find module "./assets/fonts/Roboto-Regular.tff"
client?93b6:80 ./~/css-loader?sourcemap!./~/postcss-loader!./src/styles.css
Module not found: Error: Can't resolve './assets/fonts/Roboto-Regular.tff' in 'D:\Work\Blah\angular\BlahFrontEnd\src'
resolve './assets/fonts/Roboto-Regular.tff' in 'D:\Work\Blah\angular\BlahFrontEnd\src'
  using description file: D:\Work\Blah\angular\BlahFrontEnd\package.json (relative path: ./src)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: D:\Work\Blah\angular\BlahFrontEnd\package.json (relative path: ./src)
    using description file: D:\Work\Blah\angular\BlahFrontEnd\package.json (relative path: ./src/assets/fonts/Roboto-Regular.tff)
      as directory
        D:\Work\Blah\angular\BlahFrontEnd\src\assets\fonts\Roboto-Regular.tff doesn't exist
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        D:\Work\Blah\angular\BlahFrontEnd\src\assets\fonts\Roboto-Regular.tff doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        D:\Work\Blah\angular\BlahFrontEnd\src\assets\fonts\Roboto-Regular.tff.ts doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        D:\Work\Blah\angular\BlahFrontEnd\src\assets\fonts\Roboto-Regular.tff.js doesn't exist
[D:\Work\Blah\angular\BlahFrontEnd\src\assets\fonts\Roboto-Regular.tff]
[D:\Work\Blah\angular\BlahFrontEnd\src\assets\fonts\Roboto-Regular.tff]
[D:\Work\Blah\angular\BlahFrontEnd\src\assets\fonts\Roboto-Regular.tff.ts]
[D:\Work\Blah\angular\BlahFrontEnd\src\assets\fonts\Roboto-Regular.tff.js]
 @ ./~/css-loader?sourcemap!./~/postcss-loader!./src/styles.css 6:793-837
 @ ./src/styles.css
 @ multi styles

    1. 如果我在其中添加字体定义，app.component.scss我也会收到 404 错误

      jquery.js:2 GET http://localhost:4200/assets/fonts/Roboto-Regular.tff 404

关于如何包含我的 Roboto-Regular.tff 字体的任何想法？

4

5 回答 5

66

对于通过搜索到达这里的人：

使用 npm 安装：

npm install roboto-fontface --save

添加到.angular-cli.json( apps[0].styles) 中的样式：

"styles": [
    "styles.css",
    "../node_modules/roboto-fontface/css/roboto/roboto-fontface.css"
],

就这样！

编辑：从 Angular 6 开始，这个文件被调用angular.json而不是angular-cli.json. 添加字体的工作方式仍然与以前相同。

于 2017-02-17T12:48:53.480 回答
20

您是否尝试过使用来自https://fonts.google.com的 googlefont 网址？

在你的 style.css 中：

@import url('https://fonts.googleapis.com/css?family=Roboto');

然后在 styles.css 或任何你需要的地方使用 font-family：

body, html {
  font-family: 'Roboto';
}

我在我的项目中使用它并且效果很好。

于 2017-01-03T15:25:46.697 回答
11

如果使用 SCSS，您可以：

安装roboto-fontface

npm install roboto-fontface --save

导入您的 styles.scss 文件

@import '~roboto-fontface/css/roboto/roboto-fontface.css';

body {
  font-family: Roboto, Helvetica, Arial, sans-serif;
}
于 2018-01-27T21:00:45.937 回答
7

这是在本地使用 2、4、5、6、7 等角的谷歌字体的最佳方式，首先下载谷歌字体并将其放在 assets 文件夹中，然后根据您的要求使用它。

在 angular.json 中调用 src/assets

"assets": [
    "src/assets"
 ],

在 css 文件中将此字体添加到顶部

@font-face {
  font-family: 'Roboto';
  src: url(/assets/Roboto/Roboto-Regular.ttf) format("truetype");
  font-weight: 400;
}

最后根据您的要求使用它，例如

body{
 font-family: 'Roboto', sans-serif;
}
于 2019-06-25T09:20:38.743 回答
3

您所做的是正确的，但有一个小错误：

@font-face { font-family: "Roboto-Regular"; src: url("./assets/fonts/Roboto-Regular.tff"); }

你给了tff而不是ttf

尝试这个 ：

@font-face { font-family: "Roboto-Regular"; src: url("./assets/fonts/Roboto-Regular.ttf"); }
于 2017-07-14T14:11:20.073 回答