angular2-cli 包含自定义字体

Posted 2023-03-07

【中文标题】angular2-cli 包含自定义字体

【英文标题】：angular2-cli include custom fonts

【发布时间】：2017-04-14 13:10:14

【问题描述】：

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

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

我把字体放在文件夹里

src/assets/fonts/Roboto-Regular.tff

我加了src/styles.css

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

我在一个组件中使用它.scss

font-family: "Roboto-Regular";

我收到 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

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

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

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

【问题讨论】：

死了你可能是指 ttf (TrueTypeFont) 而不是 tff？

您可以在 index.html 中包含字体

@Bernhard 你是那个人......很棒的地方:)

【参考方案1】：

这是在本地使用 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;

【讨论】：

这对我来说是正确的答案，因为我的要求是针对不想拉入远程托管字体的企业应用程序。

下载谷歌字体：google-webfonts-helper.herokuapp.com/fonts

【参考方案2】：

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

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

【讨论】：

对于新创建的项目，必须添加“../node_modules.....”，因为root 默认设置为src。执行此操作时，由于找不到引用的字体文件，生成错误。如何用最新的角度做到这一点？

@ohcibi 我查过了，你是对的。更新答案，谢谢！

如果npm包没有css/scss文件怎么办？，只有ttf。

这会使构建增加 15 mb！

与其在这件事上摆弄.angular-cli.json，我宁愿在styles.scss中做@import '~roboto-fontface/css/roboto/roboto-fontface.css';，这样更明确

【参考方案3】：

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

【参考方案4】：

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

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

【讨论】：

有人在帖子的 cmets 中提到了这一点

【参考方案5】：

您是否尝试过使用来自 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';

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

【讨论】：

问题是字体名称拼写错误

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