正文可读性基准值为 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 - 父容器或
标签必须带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 三者在不同设备、不同语言混合、不同渲染引擎下保持一致节奏。多数排版问题，根源都在这三者的耦合关系被随意打断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
