Angular 4 CLI Web应用中导入字体的最佳实践/样式

Question

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

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

将此代码放在原始组件中，我就不必在嵌套的组件中重新定义字体，只需将其视为默认字体族即可。

是否有更清晰/更好的方法来做到这一点并消除重复的代码？

- ob1

Answer 1

有更好的方法将字体引入网站，不仅适用于Angular应用。

请查看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">

- Maciej Treder

---

感谢您的回复！我还有几个问题需要问一下：我应该把导入放在哪个 CSS 文件中？在每个 CSS 文件中都加入这个导入会不会是不好的做法？最后，在导入后，我只需要像通常那样引用字体 font-family: Ubuntu; ，还是需要声明一个 @font-face？ - ob1

你不需要将每个CSS文件都包含进来，只需在顶层文件中包含即可。是的，在定义字体之后，你可以在其他样式表中使用它（只需font-family: Ubuntu）。 - Maciej Treder

由于涉及到GDPR的问题，这种方法现在在欧洲已经变得有风险了。 - Jan Papenbrock

@MaciejTreder 嗯，至少不太清楚：https://github.com/google/fonts/issues/1495 我们转而将字体本地托管，只是为了安全起见。 - Jan Papenbrock

这个解决方案存在两个问题：

1. 如上所述，谷歌不仅提供字体，还在此过程中收集数据，这可能会与当地法律相冲突。
2. 使用这种方法无法在离线环境下（例如局域网）访问字体。

- Aceonline

Answer 2

这是使用Angular 2,4,5,6,7等版本本地化使用Google字体的最佳方法：首先下载 Google 字体并将其添加到 assets 文件夹中，然后根据您的需要使用它。

在 angular.json 中调用 src/assets。

"assets": [
    "src/assets"
 ],

在 CSS 文件的顶部添加以下 font-face。

@font-face {
  font-family: 'Montserrat';
  src: url(/assets/Montserrat/Montserrat-Light.ttf) format("truetype");
  font-weight:300;
}

最后按照您的需求使用它，例如：

body{
 font-family: 'Montserrat', sans-serif;
}

- codeuix