我试图在我的项目中包含一些自定义字体,但没有成功。
注意:我正在使用 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 字体有什么想法吗?
最佳答案
对于通过搜索来到这里的人:
使用 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
。添加字体的方式仍然与以前相同。
关于angular2-cli 包括自定义字体,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40884511/