背景：
一些前端UI库例如bootstrap会给根节点（例如<html>/<body>）设置类似这样（font-family: sans-serif；）的字体规范，以防止页面字体不统一。
用法说明：
font-family 可以把多个字体名称作为一个"回退"系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。下面是一些知名网站的font-family设置：
GitHub：
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
CSDN：
font-family: PingFang SC,Hiragino Sans GB,Arial,YaHei,Verdana,Roboto,Noto,Helvetica Neue,sans-serif;
可以发现一个共同的特点是都有sans-serif，因为sans-serif代表无衬线字体（类似于微软雅黑的样式），它是一个大类而不是某一种字体，可以用来为页面字体兜底，当前面的字体在某些情况下不支持时，可保证页面字体至少是无衬线的样式，看起来没有明显的差别。
衬线字体与无衬线字体
就 Web 常用的一些字体而言，其实大体上分为衬线字体和无衬线字体。
衬线字体 -- 关键字为 serif，意为有衬线的字体，衬线的意思是在字符笔画末端有叫做衬线的小细节的额外装饰，而且笔画的粗细会有所不同，这些细节在大写字母中特别明显。
中文下，无衬线字体就是黑体，黑体字也就是又称方体或等线体，没有衬线装饰，字形端庄，笔画横平竖直，笔迹全部一样粗细。
对于 CSS 中的 font-family 而言，它有两类取值：
- 一类是类似这样的具体的字体族名定义：
font-family: Arial 这里定义了一个具体的字体样式，字体族名为 Arial; - 一类是通用字体族名，它表示一大类字体（并非单个），类似这样：
font-family: sans-serif。
通用字体族名还有：
serif 衬线字体族-
sans-serif 非衬线字体族 -
monospace 等宽字体，即字体中每个字宽度相同 -
cursive 草书字体 -
fantasy 主要是那些具有特殊艺术效果的字体
字体定义规则建议
1、尽量使用系统默认字体
使用系统默认字体的主要原因是性能，并且系统字体的优点在于它与当前操作系统使用的相匹配，因此它的文本展示必然也是一个让人舒适展示效果。
2、兼顾中西，西文在前，中文在后
中文或者西文（英文）都要考虑到。由于大部分中文字体也是带有英文部分的，但是英文部分又不怎么好看，但是英文字体中大多不包含中文。通常会先进行英文字体的声明，选择最优的英文字体，这样不会影响到中文字体的选择，中文字体声明则紧随其次。
3、兼顾多操作系统
选择字体的时候要考虑多操作系统。例如 MAC OS 下的很多中文字体在 Windows 都没有预装，为了保证 MAC 用户的体验，在定义中文字体的时候，先定义 MAC 用户的中文字体，再定义 Windows 用户的中文字体；
4、兼顾旧操作系统，以字体族系列 serif 和 sans-serif 结尾
当使用一些非常新的字体时，要考虑向下兼容，兼顾到一些极旧的操作系统，使用字体族系列 serif 和 sans-serif 结尾总归是不错的选择。
844
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
