Html 将字体导入 angular 4 cli web 应用程序的最佳实践/样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44878591/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Best practice/Style for importing font into angular 4 cli web application
提问by ob1
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.
我一直在从事 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');
}
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?
有没有更清晰/更好的方法来做到这一点并且仍然删除重复的代码？
回答by Maciej Treder
There is better way to include fonts to the website, not only to angular app.
有更好的方法可以将字体包含到网站中，而不仅仅是 angular 应用程序。
Checkout https://fonts.google.com
Why it is better?
为什么更好？
- higher performance
- higher chance, that your customer will have font in his cache
- you don't have to worry about attaching files, and use yours origin bandwidth
- 更高的性能
- 更高的机会，您的客户将在其缓存中使用字体
- 您不必担心附加文件，并使用您的原始带宽
In your case you would import following in your css file:
在您的情况下，您将在 css 文件中导入以下内容：
@import url('https://fonts.googleapis.com/css?family=Ubuntu');
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)
您可以将其放置在 index.html 中包含的主 .css 文件中。或者您可以使用<link>标签并在标题中包含字体（也在 index.html 中）
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
回答by internthings
This is best way to use google font locally with angular 2,4,5,6,7 and more, First Download Google Font and add this inside the assets folder and use it is as per your requirement.
这是在本地使用 2、4、5、6、7 等角度的谷歌字体的最佳方式，首先下载谷歌字体并将其添加到资产文件夹中，然后根据您的要求使用它。
In angular.json call this in src/assets
在 angular.json 在 src/assets 中调用它
"assets": [
"src/assets"
],
In css file add this font-face in top
在 css 文件中在顶部添加这个字体
@font-face {
font-family: 'Montserrat';
src: url(/assets/Montserrat/Montserrat-Light.ttf) format("truetype");
font-weight:300;
}
At Last use it as per your requirement like
最后根据您的要求使用它
body{
font-family: 'Montserrat', sans-serif;
}
