angular2-cli包括自定义字体

Question

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

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

1. 我把字体放在文件夹里 src/资产/字体/Roboto-Regular.tff
2. 我加入了src/styles.css @字体-face{字体-系列：“Roboto-正则”；src: url("./assets/fonts/Roboto-Regular.tff")；}
3. 我在组件.scss中使用它 字体-家庭：“机器人-常规”；
4. 我得到404错误： 无法找到模块"./assets/fonts/Roboto-Regular.tff“客户端?93b6:80 ./~/css-loader?sourcemap!./~/postcss-loader!./src/styles.css模块未找到:错误:无法解析。/assets/fonts/Roboto-Regular.tff‘在’D：\Work\角\BlahFrontEnd\src‘resolve’中的‘\Work\\BlahFrontEnd\src './assets/fonts/Roboto-Regular.tff’在‘D：\Work\\BlahFrontEnd\src’使用描述文件:d：字段'browser‘在使用描述文件后不包含有效的别名配置: D:\Work\Blah\angular\BlahFrontEnd\package.json (相对路径：./src)使用描述文件: D:\Work\Blah\angular\BlahFrontEnd\package.json (相对路径：./src/ \Work\Blah\angular\BlahFrontEnd\package.json /roboto-Regular.tff)作为目录D：\Work\Blah\角\BlahFrontEnd\src\assets\fonts\Roboto-Regular.tff不存在扩展字段'browser‘不包含有效别名配置D:\Work\Blah\angular\BlahFrontEnd\src\assets\fonts\Roboto-Regular.tff不存在.ts字段'browser’不包含有效别名配置D:\Work\Blah\angular\BlahFrontEnd\src\assets\fonts\Roboto-Regular.tff.ts‘不存在D:\Work\Blah\angular\BlahFrontEnd\src\assets\fonts\Roboto-Regular.tff.js字段'browser‘不包含有效的别名配置D:\Work\Blah\angular\BlahFrontEnd\src\assets\fonts\Roboto-Regular.tff D:\Work\Blah\angular\BlahFrontEnd\src\assets\fonts\Roboto-Regular.tff.ts @./~/css- .js加载器?源地图！/~/postcss-加载器！/src/traceses.css 6:793-837 @./src/styes.css@多种样式

1. 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字体有什么想法吗？

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"
],

就这样!

编辑:因为角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或您需要的任何地方使用字体系列：

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