将字体导入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.
为什么更好?
- 更高的性能
- 更有可能使您的客户的缓存中有字体
- 您不必担心附加文件,也可以使用原始带宽
在您的情况下,您将在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屋!