如何理解CSS font-family：serif、sans-serif、monospace 发表于2019年6月07日 作者：苏贝阿姨 来源：程序好聪明啊~
苏贝阿姨来和大家聊聊CSS中的字体问题。 CSS中可以设置字体，主要用于规范浏览器中文本的显示。 世界上有数以万计的字体文件，但用户笔记本中安装的字体却不一定相同。 因此，在这个css中，与font-family相关的设置也很奇怪。 不过，对于中国人来说，目前更常见的是使用“微软雅黑”或“宋体”作为默认。
如何理解 CSS font-family：serif、sans-serif、monospace（图 3-1）
本文的测试环境：mac/chrome。 Serif、sans-serif 和 monospace 都是一般引用。 具体字体取决于具体的浏览器设置。
常见的 CSS 字体系列组合
以下是CSS中的一些font-family组合，大家可以看看大厂门的权威意见：
body {
-webkit-font-smoothing: antialiased;
font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','5b8b4f53',sans-serif;
}
其中，这个很奇怪的5b8b4f53css字体粗细，可以在前面加上au，做成“粗体”这个词。
news.163.com：
body{
font-family:"Microsoft YaHei", "微软雅黑", "宋体", sans-serif;
}:
body {
font-family: "PingFang SC", "Lantinghei SC", "Microsoft Yahei", "5FAE8F6F96C59ED1", "helvetica", "arial", "verdana", "tahoma", "sans-serif";
}5FAE8F6F96C59ED1，翻译成英文就是“谷歌雅黑”。
php.net：
body{
font-family: "Fira Sans", "Source Sans Pro", Helvetica, Arial, sans-serif;
}衬线、无衬线、等宽字体
在定义的网页字体列表上，混杂着大家熟知的谷歌雅黑、宋体等css字体粗细，其中还有几个特殊的名字：serif、sans-serif、monospace。 这些特殊名称的解释如下：
常用的Georgia、TimesNewRoman等属于Serif字体，而Arial、Tahoma、Verdana等属于SansSerif字体。 就英语而言，也存在这两种类型。 显然，黑体、细明体（简体常用）等属于衬线体，而宋体、有缘等则属于无衬线体。 总是最后无衬线
不知道大家有没有注意到：这个大厂官网最后的字体设置是无衬线的。 也就是说：sans-serif始终是那种有保证的字体设置。 在win系统下微软浏览器的设置中，这个无衬线字体就是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。 但对于浏览器设置来说，衬线和无衬线实际上并不能区分字体的真正归属，随意交叉设置也是可以的。
实验代码
苏贝阿姨分别定义了衬线、无衬线、等宽的几个div。 可以看到，这个div的具体表现确实会随着浏览器的字体设置而变化。
serif
sans-serif
monospace
no setting可以打开两个界面，一个是上面的html，另一个是chrome的字体设置页面chrome://settings/fonts，可以实时看到疗效。
总结
在网络上写了这么多年，我不知道我每天处理的字体系列和这些虚拟字体。 你真的被吓到了吗？ css的字体font有很多相关的变化。 更多字体相关精彩内容请点击苏贝阿姨的博客：
【源码】本文代码片段及相关软件，请点击此处查看更多
【绝密】秘籍入口，只教给有缘人
CSS字体
