Angular2-CLI 包含自定义字体

Question

Angular2-CLI 包含自定义字体

angularfontswebpackangular2-cli

31

我尝试在项目中引入一些自定义字体，但没有成功。

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

I put the fonts in the folder

src/assets/fonts/Roboto-Regular.tff

I add in src/styles.css

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

I use it in a component .scss
```
font-family: "Roboto-Regular";
```

I get 404 error:

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

If I add the font-face definition in app.component.scss I get 404 error as well
```
jquery.js:2 GET http://localhost:4200/assets/fonts/Roboto-Regular.tff 404
```

有没有什么想法可以包含我的Roboto-Regular.tff字体？

- mp3por

4

你是不是想说ttf（TrueType字体），而不是tff？ - Bernhard

你可以在index.html中包含一个字体链接：<link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'> - Vinay Pandya

@Bernhard 你太棒了...发现得真好 :) - mp3por

5个回答

21

你尝试过使用来自https://fonts.google.com 的google字体链接吗？

在你的 styles.css 中：

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

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

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

我在我的项目中使用它，它表现得很好。

- RichieRock

1

问题是字体名称拼写错误。 - mp3por

1

如果您正在进行一个需要独立于互联网并且必须在没有任何互联网访问的情况下工作的“独立”项目，那么这不是最佳解决方案。但是，如果您的项目托管在线上（实际上更好，因为许多客户可能已经缓存了此字体，因为他们访问过其他可能具有此字体的站点），那么它可以正常工作。 :) - tftd

12

如果使用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;
}

- BrunoLM

7

这是使用 Angular 2、4、5、6、7 及更高版本本地化 Google 字体的最佳方法，首先下载 Google 字体并将其放入 assets 文件夹中，然后按照您的需求使用它。

在 angular.json 中调用 src/assets。

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

在css文件的顶部添加以下font-face。

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

最后根据您的需求使用它，如下所示：

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

- codeuix

1

这对我来说是正确的答案，因为我的需求是一个企业应用程序，不想拉取远程托管的字体。 - cfranklin

下载谷歌字体请访问：https://google-webfonts-helper.herokuapp.com/fonts - P Marecki

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

- Ushodaya Nallola

有人在帖子的评论中提到了这个。 - jhhoff02

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Gideon · Accepted Answer

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

使用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。添加字体的方式仍然与以前相同。