Angular项目中Google Fonts全局及指定HTML元素应用方法咨询

嘿，既然你已经在项目的styles.css里成功导入了Muli字体，那接下来的全局应用和局部元素应用操作其实很简单，我给你分两种场景详细说明：

要让整个项目的所有文本都使用Muli字体，最常用的方式是给body元素设置字体属性——因为页面里的大部分文本元素都会继承body的样式：

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

如果遇到某些第三方组件或者自定义样式覆盖了字体的情况，你可以加上!important强制生效（不过尽量少用，优先通过CSS选择器权重来解决冲突）：

body {
  font-family: 'Muli', sans-serif !important;
}

另外，也可以用通配符*选择器作用于所有元素，但这种方式会影响包括伪元素在内的所有节点，一般没必要，除非你需要彻底覆盖所有可能的字体设置：

* {
  font-family: 'Muli', sans-serif;
}

如果只想让部分元素使用Muli字体，你可以根据元素的类型、类名或者ID来针对性设置：

• 针对特定HTML标签
  比如只想让所有标题标签使用Muli：

h1, h2, h3, h4 {
  font-family: 'Muli', sans-serif;
}

• 针对自定义类名
  先在HTML元素上添加类名，比如：

<div class="muli-content">这部分内容会用Muli字体</div>

然后在styles.css（或者组件的样式文件里）添加对应的样式：

.muli-content {
  font-family: 'Muli', sans-serif;
}

这种方式灵活性最高，你可以给任意需要的元素加上这个类。

• 针对特定ID
  如果是单个唯一元素，比如：

<p id="highlight-text">这段文本单独用Muli字体</p>

对应的CSS规则：

#highlight-text {
  font-family: 'Muli', sans-serif;
}

另外提一句，如果你用Angular的组件化开发，也可以把这些特定元素的样式写在对应组件的.component.css文件里，这样样式只会作用于当前组件内的元素，更符合Angular的组件隔离特性。

内容的提问来源于stack exchange，提问作者Sumchans