如何理解css字体font-family：serif、sans-serif、monospace

我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

苏南大叔和大家聊一聊css中的字体问题，css中可以设置字体，主要用于规范文字在浏览器中的表现状态。而全世界的字体文件是成千上万的，并且用户电脑中安装的字体也是不一定的。所以，这个css中，有关font-family的设置也是千奇百怪的。不过，对于国人来说，目前都是使用“微软雅黑”或者“宋体”作为默认，这是较为常见的。

本文测试环境：mac/chrome。serif、sans-serif、monospace都是泛称，具体是哪个字体，这个就要看具体的浏览器设置了。

常见的css的font-family组合

下面的是一些css中的font-family组合，大家可以先看看大厂门的权威意见：

www.taobao.com:

body {
  -webkit-font-smoothing: antialiased;
  font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
}

其中这个很奇怪的\5b8b\4f53，在\后面添加一个u，就可以变成"宋体"两个字。

news.163.com:

body{
  font-family:"Microsoft YaHei", "微软雅黑", "宋体", sans-serif;
}

www.tudou.com：

body {
  font-family: "PingFang SC", "Lantinghei SC", "Microsoft Yahei", "\5FAE\8F6F\96C5\9ED1", "helvetica", "arial", "verdana", "tahoma", "sans-serif";
}

\5FAE\8F6F\96C5\9ED1，转化为中文是"微软雅黑"。

php.net：

body{
  font-family: "Fira Sans", "Source Sans Pro", Helvetica, Arial, sans-serif;
}

serif、sans-serif、monospace

在定义好的网页字体列表里面，混杂在大家熟知的微软雅黑、宋体等之中，还存在着几个特殊的名字：serif、sans-serif、monospace。这几个特殊名字的解释如下：

• serif：衬线字体，就是边角有特殊修饰的字体。宋体字就是有衬线字体。Serif的意思是，在字的笔划开始及结束的地方有额外的装饰，而且笔划的粗细会因直横的不同而有不同。
• sans-serif：无衬线字体，无特殊修饰的字体。sans是法语，意思是“没有”。黑体字就是无衬线字体。Sans Serif则没有这些额外的装饰，笔划粗细大致差不多。
• monospace：等宽字体，每个字母都一般宽的字体。

平时所用的Georgia、Times New Roman等就属于Serif字体，而Arial、Tahoma、Verdana等则属于Sans Serif字体。对中文而言，同样存在这两大种类，很明显，宋体、细明体(繁体中常用)等就属于Serif，而黑体、幼圆等则属于Sans Serif。

永远放在最后的sans-serif

不知道大家注意到没有：这些大厂的官网的字体设置，最后一个都是无衬线字体sans-serif。也就是说：sans-serif永远是保底的那个字体设置。而在win系统下的谷歌浏览器的设置中，这个无衬线字体sans-serif，又默认是“微软雅黑”。

chrome浏览器设置界面

这三个名字是特殊的，都是个虚拟的概念。三者都可以被浏览器自定义为某个真实的字体。比如，大家可以看一下最常见的chrome浏览器的字体设置界面，就可以看到，对这三种字体的单独设置界面。

chrome://settings/fonts，截图如下：

可以看到，对于新安装的chrome，没有设置默认字体，默认的衬线字体是"宋体"，默认的等宽字体是courier。不过，对于浏览器设置来说，衬线和非衬线，实际上并不真实区分字体font的真实归属，随便交叉设置也是可以的。

实验代码

苏南大叔分别定义了几个serif、sans-serif、monospace的div，可以看到：这些div的具体表现，确实是随着浏览器的字体设定的改变而改变的。

<div style="font-family:serif">serif</div>
<div style="font-family:sans-serif">sans-serif</div>
<div style="font-family:monospace">monospace</div>
<div style="font-family:">no setting</div>

大家可以开两个界面，一个是上述html，另外一个是chrome的字体设置页面chrome://settings/fonts，就可以实时看到效果了。

总结

写了这么多年的web，才知道这天天打交道的font-family还有这种虚拟字体的说法。真心是不是有些吓一跳？css的font字体，相关变化还非常多。更多字体相关精彩内容，请点击苏南大叔的博客：

• https://newsn.net/tag/font/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。