将字体导入Angle 4 CLI Web应用程序的最佳实践/样式 [英] Best practice/Style for importing font into angular 4 cli web application

问题描述

我一直在从事Angular 4个人项目，并想将Ubuntu字体家族添​​加到我的Angular应用程序中.向项目中添加许多自定义字体的最佳实践或样式是什么?我目前已将ubuntu字体系列保存到/assets/fonts/ubuntu-font-family-0.83中，并将其添加到最外层的CSS文件app.component.css中.

I have been working on an Angular 4 personal project, and wanted to add the Ubuntu font family to my Angular application. What is the best practice or style for adding a number of custom fonts to a project? I currently have saved the ubuntu font family into /assets/fonts/ubuntu-font-family-0.83 and added it to the outer most component CSS file, app.component.css with font face.

@font-face {
   font-family: 'Ubuntu';
   src: url('/assets/fonts/ubuntu-font-family-0.83/Ubuntu-R.ttf');
}

通过将其放置在原始组件中，我不必在嵌套组件中重新定义字体，而只需将其视为默认字体家族即可.

By putting this in the original component I don't have to redefine the font in nested components i just treat it like a default font-family.

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

Is there a clearer/better way to do this and still cut out duplicate code?

推荐答案

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

There is better way to include fonts to the website, not only to angular app.

结帐 https://fonts.google.com

为什么更好?

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

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

In your case you would import following in your css file:

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

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

You can place it in the main .css file, included by index.html. Or you can use <link> tag and include fonts in your headers (also in index.html)

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

这篇关于将字体导入Angle 4 CLI Web应用程序的最佳实践/样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！