angular2-cli包含自定义字体 [英] angular2-cli include custom fonts
问题描述
我试图在我的项目中包含一些自定义字体，但没有成功.
I am trying to include some custom fonts in my project with no success.
注意:我正在使用angular-cli:angular-cli@1.0.0-beta.21
NOTE: I am using angular-cli: angular-cli@1.0.0-beta.21
-
我将字体放在文件夹中
I put the fonts in folder
src/assets/fonts/Roboto-Regular.tff
src/assets/fonts/Roboto-Regular.tff
我添加了src/styles.css
@ font-face { 字体家族:"Roboto-Regular"； src:url("./assets/fonts/Roboto-Regular.tff"); }
@font-face { font-family: "Roboto-Regular"; src: url("./assets/fonts/Roboto-Regular.tff"); }
我在组件.scss
font-family:常规机器人"；
font-family: "Roboto-Regular";
我收到404错误:
找不到模块"./assets/fonts/Roboto-Regular.tff" 客户端?93b6:80 ./~/css-loader?sourcemap!./~/postcss-loader!./src/styles.css 找不到模块:错误:无法解析"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 \ package.json(相对路径:./src) 字段浏览器"不包含有效的别名配置 使用描述文件后: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不存在 没有扩展 字段浏览器"不包含有效的别名配置 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 字段浏览器"不包含有效的别名配置 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 @多种样式
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错误
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
jquery.js:2 GET http://localhost:4200/assets/fonts/Roboto-Regular.tff 404
任何想法如何包括我的Roboto-Regular.tff字体?
Any ideas how to include my Roboto-Regular.tff font ?
最诚挚的问候
推荐答案
针对通过搜索到达此处的人:
For the people arriving here by searching:
使用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.添加字体仍然与以前一样.
since Angular 6 this file is called angular.json instead of angular-cli.json. Adding fonts still works the same way as before.
这篇关于angular2-cli包含自定义字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
