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

Posted 2023-03-05

【中文标题】将字体导入 Angular 4 cli Web 应用程序的最佳实践/样式

【英文标题】：Best practice/Style for importing font into angular 4 cli web application

【发布时间】：2017-12-06 07:27:02

【问题描述】：

我一直在从事 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');

通过将它放在原始组件中，我不必重新定义嵌套组件中的字体，我只需将其视为默认字体系列。

有没有更清晰/更好的方法来做到这一点并且仍然删除重复的代码？

【参考方案1】：

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

结帐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">

【讨论】：

感谢您的回复！我还有其他几个问题：我会将导入的 CSS 文件放入什么文件中？包含在每个 CSS 文件中会是不好的做法吗？最后，在导入之后，我是像通常font-family: Ubuntu; 那样引用字体还是必须声明@font-face？

您不需要包含到每个 CSS 文件中。仅包含在您的***文件中。是的，定义字体后，您可以在其他样式表中使用它（只是 font-family: Ubuntu）

这种方法现在在欧洲存在风险，因为它在 GDPR 方面存在问题。

@MaciejTreder 好吧，至少不清楚：github.com/google/fonts/issues/1495 为了安全起见，我们切换到在本地托管字体。

这个解决方案存在问题的原因有两个： 1. 如上所述，谷歌不仅提供字体，而且在过程中收集可能与当地法律相冲突的数据。 2. 您无法使用该解决方案在离线环境（例如 Intranet）中访问字体。

【参考方案2】：

这是在本地使用 2、4、5、6、7 等角的谷歌字体的最佳方法，首先下载谷歌字体并将其添加到 assets 文件夹中并按照你的要求。

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