serif，sans-serif，monospace，cursive和fantasy
一.示例
generic-font-families
P.S.更多英文字体示例见参考资料-五种一般字体族英文示例
P.S.更多中文字体示例见参考资料-The Complete Beginner’s Guide to Chinese Fonts
二.作用
Generic font families are a fallback mechanism, a means of preserving some of the style sheet author’s intent in the worst case when none of the specified fonts can be selected.（摘自15.3.1 Generic font families）
由于不是所有字体在所有终端设备上都可用（有几千种字体，而且大部分都不是免费的），CSS提供了一种fallback机制：先列出想要的字体，再列出作为替补的字体，最后以一般字体族结尾
在最坏的情况下（指定的所有字体都不可用时），能通过这种方式保留一些样式表编写者的意图
一般字体族共有5个：serif，sans-serif，monospace，cursive和fantasy，相对常用的是前3个（衬线，无衬线和等宽字体族）
三.特点
serif 衬线字体族
特点：
具有修饰过的笔画，向外展开的或者尖细的末端，或者是带有实际衬线的末端
一笔一划末端（两头）都带点变化装饰，比如宋体笔画末端有毛笔字的感觉
文字末端有差异，在小字号下仍然容易辨认。但在大字号下笔画装饰部分可能会显得模糊或带有锯齿
示例：
Times New Roman、MS Georgia
宋体、仿宋
衍生：
petit-serif 小衬线字体族
末端变化不明显，可以当做无衬线
slab-serif 雕版衬线字体族
末端变化非常明显
sans-serif 无衬线字体族
sans-前缀是法语，发音为/san/，意为“无”
特点：
具有笔画清晰的末端–带有一点或者没有向外展开的，交错笔画，或者其它装饰
与“衬线字体”相比，如果字号比较小，看起来就会有些难以分辨，尤其段落阅读时容易串行
示例：
MS Trebuchet、MS Arial、MS Verdana
黑体、幼圆、隶书、楷体
cursive 手写字体族
特点：
像手写的一样
示例：
Caflisch Script、Adobe Poetica
徐静蕾手写体、迷你简黄草、华文行草、少女体
fantasy 梦幻字体族
特点：
艺术字，主要用于图片，页面上用的少
示例：
WingDings、WingDings 2、WingDings 3、Symbol
萝卜体
monospace 等宽字体族
特点：
每个字形都等宽，主要用于英文，中文方块字本来就等宽
示例：
Courier、MS Courier New、Prestige
大多数中文字体
四.使用原则
常识：
一个页面上不要用3，4种甚至更多字体
如非必要，不要在句中改变字体
sans-serif用于在线媒体，serif用于打印设备
monospace用于打字机和代码
小字号场景不要用sans-serif，衬线字体更容易辨认
最佳实践：
sans-serif是页面首选，无衬线
因为在屏幕显示设备上，衬线会让文字变得难以辨认
serif不适合在线阅读，但打印效果很好，适用于页面打印版
衬线字体在打印的场景更容易阅读，让人更容易清楚区分不同字母。打印机对分辨率的要求更精细（355ppi），高分辨率下细节显示得很清楚，而不会像屏幕显示一样出现模糊
monospace用作代码示例
每个字符等宽，在页面上占据相同的空间，打字机就用这种字体
正文不要用fantasy和cursive
可以用在图片或者标题栏里
写在最后
PPT不要用宋体，不是瞎说的
参考资料
15.3.1 一般字体族
CSS 中规定的五种一般字体家族（serif、sans-serif 等）
CSS: fonts：五种一般字体族英文示例
The Complete Beginner’s Guide to Chinese Fonts：中文字体示例
MDN | font-family
Five Font Families：英文字体字母A的演变
一起来发现Mac的内置字体库[英文字体－完结]～
Font Families – Serif, Sans-Serif, Monospace, Script, FantasyScreen and Print Resolution
更多相关文章
- 什么是活锁和饥饿？及示例
- 史上最全最强SpringMVC详细示例实战教程（二）
- 史上最全最强SpringMVC详细示例实战教程（一）
- 官方示例（十）：网页开发3D粒子系统实现降雨效果 ThingJS
- Java 正则表达式教程及示例
- Lambda 表达式的 10 个示例
- 如何使用jQuery增加字体大小的变化？
- day049--jQuery文档操作示例
- 将表格单元格字体更改为粗体