将字体导入角度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

有更好的方法将字体包含在网站中,而不仅仅是角度应用程序.

结帐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">

Answer 2

这是在本地使用 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;
}