Angular使用Google字体库

Question

我已经在我的Angular项目的styles.css文件中添加了导入Google字体的链接。这是它:

@import url('https://fonts.googleapis.com/css?family=Muli:400,700');

现在我该如何在整个项目中应用字体，并且如何仅将其添加到HTML元素中，例如对于。

- Sumchans

---

你能提供一个你打算使用它的例子吗？ - J. Pichardo

@Pichardo，例如对于<h1>元素。 - Sumchans

Answer 1

使用Google字体的最佳方法是在您的index.html文件的…部分中包含脚本引用。随着您深入使用Google作为您的开发工具，您会发现其中最好的部分之一是他们的cdn支持此方式构建！等效的脚本包括是：。这类似于Google的Material-Icons的工作方式！要在样式表中使用它，请在您的基础styles.css文件中包含它：

html, body {
    font-family: 'Muli';
}

注意：你会发现CSS标签“font-family”实际上有很多选项。这是最基本的，但如果你需要更多信息，我很乐意更新答案以提供更具体的信息。我想尽力理解你的问题并解决它，我们可以一起建立对问题的深入了解。

- Z. Bagley

---

@Bagley。我在index.html文件中找到了你提到的链接，现在该怎么使用它呢？例如，如果我想在<h1>中使用Roboto字体，你能提供一个例子吗？ - Sumchans

Answer 2

另一个好做法是将字体下载到您的服务器上。这样，您创建的企业内部应用程序就不需要获取外部资源才能正常运行。在我们国家的投票机构中，我们会在选举日切断与服务器的连接，以避免黑客攻击，因此应用程序必须在本地拥有所需的所有资产：

 $ npm install --save typeface-muli

在 angular.json 中添加：

 "styles": [
   "src/styles.scss",
   "node_modules/typeface-muli/index.css" <-- add this line
 ],

从index.html中移除：

 <!-- <link href="https://fonts.googleapis.com/css?family=Muli:300,400,600,700" rel="stylesheet"> -->

- NaN

---

typefaces现已被弃用。他们建议您改用https://github.com/fontsource/fontsource。 - developer033

这意味着要像这样安装它: npm install --save @fontsource/typeface-muli - Janos Vinceller