angular2-cli包括自定义字体

Question

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

注意:我使用的是angular-cli:angular-cli@1.0.0-beta.21

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

   SRC /资产/字体/的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错误:

   找不到模块"./assets/fonts/Roboto-Regular.tff"客户端？93b6:80 ./~/css-loader?sourcemap!./〜/ postcc-download =.rc/styles.css找不到模块:错误:无法解析'D:\ Work\Blah\angular\BlahFrontEnd\src'中的'./assets/fonts/Roboto-Regular.tff''解析'./assets/fonts/Roboto-Regular.tff'in' D:\ Work\Blah\angular\BlahFrontEnd\src'使用描述文件:D:\ Work\Blah\angular\BlahFrontEnd\package.json(相对路径:./ src)字段'browser'不包含有效别名使用描述文件后的配置:D:\ Work\Blah\angular\BlahFrontEnd\package.json(相对路径:./ src)使用描述文件:D:\ Work\Blah\angular\BlahFrontEnd\package.json(相对路径: ./src/assets/fonts/Roboto-Regular.tff)作为目录D:\ Work\Blah\angular\BlahFrontEnd\src\assets\fonts\Roboto-Regular.tff不存在没有扩展字段'浏览器'没有' t包含有效的别名配置D:\ Work\Blah\angular\BlahFrontEnd\src\assets\fonts\Roboto-Regular.tff不存在.ts字段'浏览器'不合作 获得有效的别名配置D:\ Work\Blah\angular\BlahFrontEnd\src\assets\fonts\Roboto-Regular.tff.ts不存在.js字段'browser'不包含有效的别名配置D:\ Work\Blah\angular\BlahFrontEnd\src\assets\fonts\Roboto-Regular.tff.js不存在[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 @dulti styles

5. 如果我在app.component.scssI get 404错误中添加了font-face定义

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

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

最好的祝福

Answer 1

通过搜索到达这里的人们:

使用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.添加字体仍然与以前一样.

Answer 2

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

在你的styles.css中:

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

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

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

我在我的项目中使用它,它工作得很好.

Answer 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;
}

Answer 4

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

在 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;
}