正文可读性基准值为 font-size: 16px + line-height: 1.6,是浏览器渲染与中英文混排视觉规律决定的硬约束;font-family 需按语言优先级排序,中文为主场景用 "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif;text-align: justify 需配合 text-justify: inter-character 且 lang="zh" 才对中文生效;letter-spacing 中文正文禁用,标题限 0.03em~0.06em。

font-size: 16px + line-height: 1.6 是正文可读性基准值
这不是“推荐”,而是浏览器渲染机制和中英文混排视觉规律共同决定的硬约束。设小了(如 14px),移动端 Safari/Chrome 会强制放大破坏布局;设大了(如 18px),窄容器里换行频繁,卡片类 UI 容易撑开。
关键不是数值本身,而是它和 line-height 的配合关系:
-
line-height: 1.6是无单位倍数,随字号缩放——比写line-height: 24px安全得多 - 纯中文长文可用
1.5,但中英混排技术文档必须用1.6,否则英文小写字母基线与汉字错位 -
p、ul、blockquote都得统一设,别只照顾p忘了列表项行高塌陷
font-family 堆叠链必须按“语言优先级”写
把中文字体写在前面,比如 "Noto Sans CJK SC", Arial, sans-serif,会导致所有英文字母也走中文字体——而中文字体里的英文通常 x-height 偏小、字重偏细,和周围中文不协调。
正确顺序是:先写西文字体,再 fallback 到中文字体,最后兜底 sans-serif:
立即学习“前端免费学习笔记(深入)”;
- 英文为主场景:
"Inter", "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif - 中文为主场景:
"PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif - 避免写
"SimSun"这类过时字体——Windows 10+ 默认已不装,fallback 失效
text-align: justify 对中文无效,必须配 text-justify: inter-character
单独写 text-align: justify 在中文段落上基本没反应,不是你漏了样式,是浏览器默认不在汉字间插间隙。Chrome 120+、Safari 17.4+、Firefox 110+ 才支持真正生效的 text-justify: inter-character,但它有两个死条件:
- 必须同时声明
text-align: justify和text-justify: inter-character - 父容器或
<html>标签必须带lang="zh",否则 Safari 静默失效 - 段落太短(少于 4 行)时,浏览器无法合理分配字间距,末行仍左对齐
letter-spacing 别乱调,中文慎用 >0.06em
letter-spacing 对中文不是“拉宽更清晰”,而是“拉过头就断语义”。标点(尤其是 。、,)后会出现肉眼可见的空隙,破坏阅读节奏。
实操边界很窄:
- 标题强化可用
letter-spacing: 0.03em ~ 0.06em,再大就显松散 - 正文中禁用,靠
line-height和word-spacing调整呼吸感 - 绝对不要用
letter-spacing模拟两端对齐——它不解决字距均匀问题,只制造标点后空洞
真正难的不是写对某一行 CSS,而是让 font-size、line-height、font-family 三者在不同设备、不同语言混合、不同渲染引擎下保持一致节奏。多数排版问题,根源都在这三者的耦合关系被随意打断。



















