将字体导入到角度4 cli web应用程序的最佳做法/样式

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

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

通过将这种原成分，我没有重新定义嵌套组成部分，我只是把它当作默认字体家族的字体。

有没有更清晰/更好的方法来做到这一点，仍然切出重复的代码？

来源

2017-07-03 ob1

有更好的方式来包括字体到网站，而不仅仅是角度的应用程序。

结帐https://fonts.google.com

为什么它是更好？

更高的性能
较高的机会，你的客户将有字体在他的缓存
你不必担心附加文件，并使用你的出身带宽

在你你可以在你的css文件中输入以下内容：

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

你可以将它放在主要的.css文件中，包含在index.html中。或者，您可以使用<link>标记，并在标题中包含字体（也位于index.html）

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

来源

2017-07-03 06:30:49

谢谢您的回应！我还有其他一些问题：我会将导入的CSS文件放在什么位置？包含在每个CSS文件中是否是不好的做法？最后，在导入之后，我只是像通常所说的那样引用字体'font-family：Ubuntu;'还是必须声明'@ font-face'？ – ob1

感谢您提供为什么这种方法更好的原因！ – ob1

你不需要包含每个CSS文件。只包含在顶级文件中。是的，在定义字体之后，你可以在其他样式表中使用它（只是font-family：Ubuntu） –

将字体导入到角度4 cli web应用程序的最佳做法/样式

回答

相关问题