直接改 line-height、font-size 和 text-align 即可解决 80% 阅读体验问题：line-height 用无单位值（如 1.6）确保等比缩放；font-size 正文设 16px，标题用 rem；text-align 一律 left，禁用 justify 和 word-spacing；语义 HTML 是前提。
直接改 line-height、font-size 和 text-align 就能解决 80% 的阅读体验问题，不需要 JS、不用第三方库，关键在三个 CSS 属性的单位和组合方式是否正确。
line-height 必须用无单位数值
设成 line-height: 24px 或 line-height: 150% 是常见错误：前者在用户放大系统字体时行距卡死，后者会继承父级计算基准导致嵌套错乱。阅读障碍用户常开启系统大字模式，只有无单位值（如 1.6）能随 font-size 等比缩放。
实际建议：
-
p元素统一设line-height: 1.6，不写单位也不写 px - 标题可略小，如
h2 { line-height: 1.4; }，保持视觉节奏紧凑但不压迫 - 避免在
table、pre或input上全局重置line-height，它们有各自渲染逻辑
font-size 优先用 rem，且必须显式声明
font-size: 100% 或 font-size: 1em 看似“继承默认”，实则危险：一旦父级被重置（比如某些 UI 框架或 reset.css），正文可能缩到 12px 或撑到 20px，line-height 却没同步变，文字立刻粘连或飘忽。
立即学习“前端免费学习笔记（深入）”；
安全做法：
- 正文段落强制写
font-size: 16px—— 这是浏览器默认值、移动端防强制缩放、系统缩放兼容三者的交集点 - 根元素
:root不要设font-size，让系统决定基础字号；若需响应式调整，用媒体查询改:root，而非靠em嵌套推导 - 标题用
em或rem，如h2 { font-size: 1.5rem; }，确保比例稳定
text-align 和 letter-spacing 要按场景开关
中文排版里 text-align: justify 是隐形陷阱：两端对齐会在词间制造不规则空白“河流”，破坏语义分组；而 letter-spacing: normal 在部分字体下会让「日」「曰」「口」这类形近字更难区分。
推荐配置：
- 正文一律用
text-align: left（不是start），保证 RTL 语言也能 fallback 正确 - 禁用
letter-spacing全局设置；仅在易混淆字形集中区域（如术语表、API 参数说明）局部启用letter-spacing: 0.05em - 绝对不要用
word-spacing—— 中文无空格分词，该属性无效且可能触发渲染异常
段落结构本身是排版的第一层
再好的 CSS 也救不了语义混乱的 HTML：<p><br></p><p><br></p> 模拟空行，或把五条操作步骤塞进一个 <p>，都会让屏幕阅读器读成一整段不可暂停的语音流。
真正影响阅读节奏的是结构：
- 每个
<p>只承载一个独立语义单元：一个问题、一条指令、一个注意事项 - 长列表必须用
<ol>或<ul>，不能用多个<p>模拟——否则辅助设备无法报出“第 3 项，共 7 项” - 用
<hr>分隔主题块，比加大margin-bottom更具语义，且对键盘导航友好
最常被忽略的点：所有这些样式必须作用在语义正确的标签上。如果结构是 <div class="paragraph">，再精细的 line-height 配置也只是补丁，不是解法。
