#书摘 #css #前端
《CSS 世界》font-family 详解
font-family支持两类属性值，一类是“字体名”，一类是“字体族”。
1. “字体名”很好理解，就是使用的对应字体的名称。如果字体名包含空格，需要使用引号包起来
body {
font-family: 'Microsoft Yahei';
}

2. “字体族”分为很多类，MDN上文档分类如下：
font-family: serif;
font-family: sans-serif;
font-family: monospace;
font-family: cursive;
font-family: fantasy;
font-family: system-ui;
具体含义解释如下。
- serif：衬线字体
- sans-serif：无衬线字体
- monospace：等宽字体
- cursive：手写字体
- fantasy：奇幻字体
- system-ui：系统UI字体。
对于中文网站，cursive和fantasy应用场景有限，因此这里不予探讨，这里着重介绍一下衬线字体、无衬线字体和等宽字体。
- 衬线字体，通俗讲就是笔画开始、结束的地方有额外装饰而且笔画的粗细会有所不同的字体。网页中常用中文衬线字体是“宋体”，常用英文衬线字体有Times New Roman、Georgia等。
- 无衬线字体没有这些额外的装饰，而且笔画的粗细差不多，如中文的“雅黑”字体，英文包括Arial、Verdana、Tahoma、Helivetica、Calibri等。以前人们排正文喜欢使用衬线字体，但是如今，不知是审美疲劳还是人们更加追求简洁干净的缘故，更喜欢使用无衬线字体，
- 所谓等宽字体，一般是针对英文字体而言的。据我所知，东亚字体应该都是等宽的，就是每个字符在同等 font-size 下占据的宽度是一样的。（这个踩过坑，英文字体不等宽的很多）
但是需要注意的是，serif 和 sans-serif 一定要写在最后，因为在大多数浏览器下，写在serif和sans-serif后面的所有字体都会被忽略。例如： body {
font-family: sans-serif, "Microsoft Yahei";
}