Question

我一直在研究Angular 4个人项目，并希望将Ubuntu字体系列添加到我的Angular应用程序中。向项目添加大量自定义字体的最佳做法或风格是什么？我目前已将ubuntu字体系列保存到/assets/fonts/ubuntu-font-family-0.83中，并将其添加到最外面的组件CSS文件app.component.css with font face。

@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及以上的Google字体的最佳方法，请先在资源文件夹中下载Google字体，然后按照规定使用您的要求。

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

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

2 个答案: