CSS 设置字体家族

CSS 字体家族指的就是我们电脑上安装的字体，比如：Arial、Times New Roman、微软雅黑、苹方 等等。网页一般是按浏览器设置的字体家族来显示文字，如果要自定义字体，那么就需要使用 font-family 属性。

font-family 的取值有两种方式，一种是直接使用字体的名称，一种是使用通用字体。我们先看一下直接使用字体的名称的方式。

用字体名称设置字体家族

使用字体名称时，可以直接把设备上安装的字体名称写上，支持写多个，每个字体名称之间用逗号隔开。多个字体之间的优先级为，先设置的为高，CSS 在渲染字体的时候会逐字应用字体，如果某个字符在优先级高的字体不存在，那么就会从下一个后备字体中寻找，依次类推。来看一个例子，代码如下：

<style>
  p {
    font-family: Arial, "PingFang SC", "Microsoft Yahei";
  }
</style>

<p>This is 一段字体，包含 English and 中文。</p>

预览：

在 p 标签中，字体设置为了 Arial、PingFang SC 和 Microsoft Yahei，其中 PingFang SC 是苹果苹方的英文表示，Microsoft Yahei 是微软雅黑的英文表示，我们也可以直接写苹方或微软雅黑等中文表示。

在渲染字体时，因为 Arial 是第一位，它是一个英文字体，那么渲染 "This is" 是没有问题的，在遇到后面的中文 "一段字体，包含" 时，Arial 中不包含这些字符，那么就会到下一个字体中去寻找，如果是 MacOS 系统，会使用 "PingFang SC"，如果是 Windows 系统，会使用 "Microsoft Yahei"。再后面遇到 "English and" 和 "中文" 时也会用同样的方式去查找字体。

注意，如果字体名称之间有空格，推荐使用双引号括起来。

通用字体名称

CSS font-family 支持使用通用字体名称的方式指定一类字体，来作为保底，例如 sans-serif 表示无衬线字体，浏览器可能会选择默认的一种无衬线的字体进行渲染，例如英文中的 Arial、Open Sans，中文的苹方、黑体等。

一般，我们把通用字体放到 font-family 指定的字体列表的最后面，这样会有默认的字体进行渲染。假如说我们渲染苹方黑体，但是有的电脑中没有，但是 font-family 指定了 sans-serif 的话，就可以使用类似黑体之类的无衬线字体进行渲染，避免使用宋体等有衬线的字体，造成页面风格不统一。

另外在 font-family 中指定通用字体时，不能使用双引号，直接写上名字就可以了。

通用字体的名称和显示效果可以参考下表（不同操作系统、浏览器下可能显示的不一样）：

通用字体名称	字体显示效果
sans-serif	无衬线字体
serif	衬线字体
monospace	等宽字体
cursive	手写字体
fantasy	华丽字体
system-ui	系统 UI 系列字体
ui-serif	系统 UI 系列衬线字体
ui-sans-serif	系统 UI 系列无衬线字体
ui-monospace	系统 UI 系列等宽字体
ui-rounded	系统 UI 系列圆体
math	数学字体
emoji	Emoji 表情😜字体
fangsong	仿宋字体

小结

这个就是 CSS 设置字体家族的方法，一种是直接使用系统的字体名称，对于中文字体，既可以用中文字体名，也可以用英文字体名。CSS font-family 支持设置多个字体，用逗号隔开，越靠前的字体优先级越高，浏览器会根据 CSS 设置的 font=family 的顺序，逐字去查找字体，如果不存在，就去下一个后备字体中寻找。

CSS font-family 还支持使用通用字体名称的形式，例如 serif、sans-serif，方便作为保底字体，设置通用字体名称时不要使用双引号，直接按照字体名称填写即可。