跳到主要内容位置

CSS 设置字体家族

CSS 字体家族指的就是我们电脑上安装的字体,比如:ArialTimes 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数学字体
emojiEmoji 表情😜字体
fangsong仿宋字体

小结#

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

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