我一直在做一个 Angular 4 个人项目，并希望将 Ubuntu 字体系列添加到我的 Angular 应用程序中。向项目添加多种自定义字体的最佳实践或样式是什么？我目前已将 ubuntu 字体系列保存到/assets/fonts/ubuntu-font-family-0.83 中，并将其添加到最外层的组件 CSS 文件 app.component.css 带有字体。
@font-face {
font-family: 'Ubuntu';
src: url('/assets/fonts/ubuntu-font-family-0.83/Ubuntu-R.ttf');
}
通过将其放在原始组件中，我不必在嵌套组件中重新定义字体，我只是将其视为默认字体系列。
有没有更清晰/更好的方法来做到这一点，同时仍然删除重复的代码？
有更好的方法可以将字体包含在网站中，而不仅仅是角度应用程序。
结帐 https://fonts.google.com
为什么更好？
- 更高的性能
- 更有可能，您的客户在他的缓存中有字体
- 您不必担心附加文件，并使用您的原始带宽
在您的情况下，您将在 css 文件中导入以下内容：
@import url('https://fonts.googleapis.com/css?family=Ubuntu');
您可以将其放在主.css文件中，包含在 index.html 中。或者您可以使用<link>标签并在标题中包含字体(也在索引.html中(
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
这是在本地使用角度为 2、4、5、6、7 等的谷歌字体的最佳方式，首先下载谷歌字体并将其添加到资产文件夹中，并根据您的要求使用它。
在angular.json中，在src/assets中调用它
"assets": [
"src/assets"
],
在 css 文件中，将此字体添加到顶部
@font-face {
font-family: 'Montserrat';
src: url(/assets/Montserrat/Montserrat-Light.ttf) format("truetype");
font-weight:300;
}
最后根据您的要求使用它，例如
body{
font-family: 'Montserrat', sans-serif;
}