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

本博客不欢迎：各种镜像采集行为，请尊重知识产权法律法规。大家都是程序员，不要闹得不开心。

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

如何理解css字体font-family：serif、sans-serif、monospace(图3-1)

本文测试环境：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。

chrome浏览器设置界面

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

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

如何理解css字体font-family：serif、sans-serif、monospace(图3-2)

如何理解css字体font-family：serif、sans-serif、monospace(图3-3)

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

实验代码

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

serif

sans-serif

monospace

no setting

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

总结

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

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。

本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。