serif和sans-serif是什么字体,为什么font-family最后要加sans-serif

serif的含义是衬线字体,sans-serif的含义是无衬线字体

衬线字体的特点是:在字的笔划开始及结束的地方有额外的装饰,而且笔画的粗细会有所不同。

无衬线字体字体的特点是:笔划没有额外的装饰,粗细大致差不多,字形端庄,横平竖直。

两者的区别大致如下图所示:

常见的衬线字体有Times New Roman、宋体。

常见的无衬线字体有Tahoma、Verdana、Arial、Helvetica、苹方、微软雅黑等等。

我们需要了解的是:serif和sans-serif都不是指某一个字体,而是指一个字体族,是一系列具有相似特征字体的集合。

互联网经常使用无衬线字体,因为无衬线字体相对于衬线字体,不容易引起视觉疲劳。

我们经常看到网页的font-family属性中出现sans-serif,它们通常被放到一串字体的最后面。

例如:font-family: 'PingFangSC-Regular', 'helvetica neue', tahoma, 'microsoft yahei', arial, sans-serif;

为什么要把sans-serif放到最后呢?

因为定义font-family字体族后,字体是按照从左到右的顺序依次查找,如果当前字体可用就会应用到网页上,不可用就会继续往下查找。

但如果列出的所有字体都不可用,就会使用浏览器的默认字体。

我们可以查看和更改浏览器的默认字体,拿Chrome浏览器举例:

点击浏览器的“设置-外观-自定义字体”可以进入字体设置界面,其中标准字体是指网页中的font-family中无可用字体时,浏览器将使用的默认字体。

但如果font-family的末尾指定了serif,那么标准字体将不会生效,生效的将是标准字体下方设置的serif字体(serif字体就变成了默认字体)。

同理,如果font-family的末尾指定了sans-serif,生效的将是serif字体下方的sans-serif字体(sans-serif字体就变成了默认字体)。

因此,如果想要指定默认字体用无衬线字体,方法就是在font-family最后加一个sans-serif。

这里又会连带出一个新问题,浏览器中的字体从哪来呢?怎么确保浏览器中一定有sans-serif类型字体呢?

同样拿Chrome举例,通过对比操作系统的字体库和浏览器支持的字体,可以很容易看出:浏览器的字体来源于你的操作系统。

下图是我电脑中的字体:中文字体有冬青黑体简体中文、黑体-繁、黑体-简、华文宋体、苹方-繁、苹方-港、苹方-简、宋体-繁、宋体-简,一共九种。

这和浏览器提供的九种中文字体完全吻合,如下图所示:

所以浏览器中的字体来自于操作系统。

既然浏览器中的字体来自于操作系统,操作系统中又会内置多种衬线字体和无衬线字体,所以完全不用担心浏览器中没有可用的无衬线字体。