Question

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

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

我把字体放在文件夹
中
的src /资产/字体/的Roboto-Regular.tff
我添加src/styles.css

@ font-face { font-family：＆＃34; Roboto-Regular＆＃34 ;; src：url（＆＃34; ./ assets / fonts / Roboto-Regular.tff＆＃34;）; }
我在组件.scss
中使用它
font-family：＆＃34; Roboto-Regular＆＃34;;
我收到404错误：

找不到模块＆＃34; ./ assets / fonts / Roboto-Regular.tff＆＃34; 客户？93b6：80 ./~/css-loader?sourcemap！。/〜/ postcc-MediaD。/ src / styles.css 找不到模块：错误：无法解析＆＃39; ./ assets / fonts / Roboto-Regular.tff＆＃39;在＆＃39; D：\ Work \ Blah \ angular \ BlahFrontEnd \ src＆＃39; 解决＆＃39; ./ assets / fonts / Roboto-Regular.tff＆＃39;在＆＃39; D：\ Work \ Blah \ angular \ BlahFrontEnd \ src＆＃39; 使用描述文件：D：\ Work \ Blah \ angular \ BlahFrontEnd \ package.json（相对路径：./ src） Field＆＃39;浏览器＆＃39;不包含有效的别名配置使用描述文件后：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不存在没有延期 Field＆＃39;浏览器＆＃39;不包含有效的别名配置 D：\ Work \ Blah \ angular \ BlahFrontEnd \ src \ assets \ fonts \ Roboto-Regular.tff不存在 .TS Field＆＃39;浏览器＆＃39;不包含有效的别名配置 D：\ Work \ Blah \ angular \ BlahFrontEnd \ src \ assets \ fonts \ Roboto-Regular.tff.ts不存在 .js文件 Field＆＃39;浏览器＆＃39;不包含有效的别名配置 D：\ Work \ Blah \ angular \ BlahFrontEnd \ src \ assets \ fonts \ Roboto-Regular.tff.js不存在 [d：\工作\布拉赫\角\ BlahFrontEnd \ SRC \资产\字体\的Roboto-Regular.tff] [d：\工作\布拉赫\角\ BlahFrontEnd \ SRC \资产\字体\的Roboto-Regular.tff] [d：\工作\布拉赫\角\ BlahFrontEnd \ SRC \资产\字体\的Roboto-Regular.tff.ts] [d：\工作\布拉赫\角\ BlahFrontEnd \ SRC \资产\字体\的Roboto-Regular.tff.js] @ ./~/css-loader?sourcemap!./~/postcss-loader!./src/styles.css 6：793-837 @ ./src/styles.css @多样式
如果我在app.component.scss中添加字体 - 面部定义，我也会收到404错误

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中：

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

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

sites/development.services.yml

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

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

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

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

Answer 5

这是在本地使用角度为2,4,5,6,7及以上的Google字体的最佳方法，请先在资源文件夹中下载Google字体，然后按照规定使用您的要求。

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

angular2-cli包含自定义字体

5 个答案: