html - 将字体导入 angular 4 cli web 应用程序的最佳实践/样式

Question

我一直在从事 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');
}

通过将它放在原始组件中，我不必在嵌套组件中重新定义字体，我只是将其视为默认字体系列。

是否有更清晰/更好的方法来执行此操作并仍然删除重复代码？

Answer 1

有更好的方法将字体包含到网站，而不仅仅是 Angular 应用程序。

结帐 https://fonts.google.com

为什么更好？

• 更高的性能
• 您的客户缓存中有字体的可能性更高
• 您不必担心附加文件，并使用您的原始带宽

在您的情况下，您将在 css 文件中导入以下内容:

@import url('https://fonts.googleapis.com/css?family=Ubuntu');

您可以将它放在 index.html 包含的主 .css 文件中。或者你可以使用 <link>在标题中标记并包含字体(也在 index.html 中)

<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">