CSS中如何理解与使用 serif 与 sans-serif

在 CSS 的 font-family 属性里，经常会看到两种 通用字体族（generic families）——serif 和 sans-serif。它们是浏览器为“衬线体”和“无衬线体”分别保留的占位符。当你给元素指定这两个关键字时，浏览器会在用户系统中寻找最合适的对应字体并呈现出来。

• “serif”在拉丁文中意为“小装饰线”；而“sans”表示“没有”，故 sans-serif 即“没有衬线”。[2]

1. 典型写法

1body {
2  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
3               Roboto, "Helvetica Neue", Arial, sans-serif;
4}
5
6h1, h2 {
7  font-family: "Times New Roman", "Source Han Serif SC", serif;
8}

• 列表从前到后按优先级匹配；若前面的字体在用户设备上缺失，就回退到下一项。
• 结尾加上 serif 或 sans-serif 可确保在极端情况下仍有合适字体渲染出来，符合 W3C 规范的“最后兜底”做法。[4]

2. 何时选 serif，何时选 sans-serif？

• 长篇连续正文：衬线体的“尾巴”帮助字形在水平行内形成视觉导轨，阅读耐久度更佳，传统报刊和图书正文多用 serif。[3][4]
• 屏幕显示、标题与界面文本：无衬线体粗细均匀、像素网格适配度高，缩小字号时仍保持清晰，更适合网页、App UI 和醒目标题。[5][2]
• 品牌气质：serif 常给人“经典、权威、正式”之感；sans-serif 则传递“现代、简洁、科技”形象。[5]

3. 与其他通用字体族的关系

CSS 还定义了 monospace（等宽）、cursive（手写体）、fantasy（装饰体）等通用族，用法和 serif/sans-serif 相同。合理组合多种 generic families，可在不同平台获得更一致的排版效果。[6]

4. 小结

1. serif = 衬线体，sans-serif = 无衬线体。
2. 在 font-family 中把它们作为备选，保证跨系统可用。
3. 根据阅读场景和品牌调性选择：长正文偏 serif，屏幕与标题偏 sans-serif。

掌握这两个关键词，就能在 CSS 中轻松控制西文和中文的“带尾巴”或“无尾巴”字体风格，实现既优雅又兼容的网页排版。

[1] https://zh.wikipedia.org/zh-sg/%E8%A1%AC%E7%BA%BF%E4%BD%93 [2] https://zh.wikipedia.org/zh-sg/%E6%97%A0%E8%A1%AC%E7%BA%BF%E4%BD%93 [3] https://www.cnblogs.com/huahuayu/articles/8372933.html [4] https://kb.cnblogs.com/page/192018/ [5] https://juejin.cn/post/7229586461246521381 [6] https://www.cnblogs.com/shangsi/articles/12212792.html [7] https://www.lenovo.com/tw/zh/glossary/what-is-serif/ [8] https://blog.csdn.net/qq_41055471/article/details/87080630 [9] https://baike.baidu.com/item/%E8%A1%AC%E7%BA%BF%E4%BD%93/57165948 [10] https://baike.baidu.com/item/%E6%97%A0%E8%A1%AC%E7%BA%BF%E4%BD%93/2374029 [11] https://blog.arayofsunshine.dev/serif-sans-serif [12] https://blog.csdn.net/coising/article/details/129396835 [13] https://blog.csdn.net/lunix01/article/details/122816204 [14] https://blog.justfont.com/2014/06/google-fonts-1/ [15] https://www.cnblogs.com/jiftle/p/18314500 [16] https://cloud.tencent.com/developer/article/1162726 [17] https://cn.monotype-asia.com/resources/article/font-style-guide [18] https://lyrasoft.net/en/15-blog/this/33-the-decisive-factor-design-and-visual-effects-font-learn-esoteric-part-2.html [19] https://clhweb.com/news/tech/20180308/font_types_explained_serif_sans_script_slab.html [20] https://blog.csdn.net/qq_25447799/article/details/121527283