衬线 · Serif笔画有起止装饰 · 传统 / 权威
敏捷的棕色狐狸 The quick brown fox jumps 0123 — 字形气质会随字体族改变。
font-family: Georgia, 'Noto Serif SC', 'Songti SC', serif;✓ 推荐用于此场景（长文正文）产品与设计 · 排版与视觉样式
衬线与无衬线Serif & Sans
按阅读场景给三种字体族分工——衬线给长文气质、无衬线给界面扫描、等宽给代码与对齐，并写清含中文与系统回退的字体栈。
给同一段字选字体族与场景
先选字体族看字形气质，再选使用场景；样本物件会换字体、换族徽章、换气质戳，并给出推荐 / 谨慎 / 换一个的匹配判定。
同一段中英文，先选字体族看字形气质，再选使用场景，看样本物件上的匹配判定。
字体族
使用场景
✓ 推荐用于此场景原因：衬线（Serif）笔画有起止装饰 · 传统 / 权威，与「长文正文」匹配。下一步：把上面的 font-family 栈写入样式，并补上中文与系统回退。
面板里测到的字族分工
刚才切族与场景得到的三种判定，对应三条可复述的结论与一条工程底线。
- 衬线（Georgia / 宋体）：笔画有起止装饰，气质传统权威，给长文标题或印刷正文。
- 无衬线（system-ui / 思源黑体）：笔画均匀，屏幕小字扫描快，给 UI、标签、数据界面。
- 等宽（Menlo / 等宽）：每字同宽，代码、日志与表格数字列对齐稳。
- font-family 栈同时写英文、中文与系统回退（system-ui, -apple-system, ...），加载失败也不掉成不可控字体。
什么时候按场景选族
先看阅读任务与显示环境，再决定字体族；不要用衬线硬扛屏幕小字。
衬线建立阅读节奏与气质；屏幕长文也可用无衬线保证小字可读。
无衬线在小字、低分屏更稳；密集数据的数字配等宽对齐列。
等宽保证缩进与字符对齐，diff 和表格更易读。
从角色到字体栈的最短路径
先定角色再选族，最后写字体栈并在真实环境验证。
- 定角色：这段是标题、正文、数据还是代码？
- 选族：长文正文 / 品牌标题→衬线；界面 / 数据→无衬线；代码 / 对齐数字→等宽。
- 写栈：font-family 同时覆盖英文、中文和系统回退，例如 system-ui, -apple-system, 'PingFang SC', sans-serif。
- 验证：小字、屏幕和中文字符覆盖一起看；网络字体加载失败仍可读。
同一数据表格：正例与反例
目标都是让密集数据列清楚可扫。差异只在字体族是否匹配场景。
表格正文用无衬线，金额与数量用等宽数字；同列数字右对齐，眼睛能顺着列扫下去。
差异：字体族匹配场景，可读性与对齐都到位。同一表格正文换成衬线，数字保持比例字宽；「1」「7」「0」宽度不同，列参差不齐。
差异：只改了字体族——衬线正文加比例数字拖累密集数据。快速自测
产品后台有一份密集数据表加一段长说明文案，正文字体该优先选哪个族？
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。