HTML文字排版优化核心在于三层控制：语义结构正确、基础CSS干预到位、特殊场景用对属性；必须用p而非div或实现段落分隔，因其自带语义化margin且兼容屏幕阅读器与缩放；font-size用rem、line-height用无单位值；中文两端对齐需lang="zh"、text-align: justify、text-justify: inter-character三者缺一不可。
直接说结论：HTML文字排版优化不是靠堆CSS技巧，而是靠三层控制——语义结构正确、基础CSS干预到位、特殊场景用对属性。错在第一层（比如用
代替
），后面全白调。
为什么
必须用对，而不是靠CSS硬撑
浏览器默认给p加margin-top和margin-bottom，这是唯一能自然分隔语义段落的机制。滥用div或连续<br>会导致：
- 屏幕阅读器把整块内容读成一句，无法停顿或跳过
- 用户缩放字体时，
px单位的margin会失准，段落粘连 -
p内嵌div或p触发HTML解析器自动修正，DOM结构与你写的不一致
正确做法是每个p只装一个独立信息单元，比如一条指令、一个问题、一个注意事项；用margin统一设为1.2em 0，不写px值。
line-height和font-size必须用无单位值+rem
设line-height: 24px或font-size: 100%是常见陷阱。前者在用户放大系统字体时行距塌陷；后者可能继承被重置的父级字号，导致意外缩小。
立即学习“前端免费学习笔记（深入）”；
-
line-height始终用无单位数值，如1.6，它随font-size等比缩放 -
font-size用rem，根元素不设固定值，让系统决定基准 - 正文起步建议
font-size: 16px+line-height: 1.6，这是浏览器默认、系统缩放兼容、移动端防强制放大的交集点
中文两端对齐不能只写text-align: justify
纯text-align: justify对中文基本无效——浏览器默认不在汉字间插弹性间隙，结果看起来和左对齐一样。真正生效要满足三个硬条件：
- 容器或
html标签带lang="zh" - 同时声明
text-align: justify和text-justify: inter-character - 段落长度足够（通常≥4行），否则末行仍左对齐
单行两端对齐则必须加text-align-last: justify，且容器要有明确width，否则不触发。
避免letter-spacing和word-spacing误用
这两个属性在中文场景极易翻车：
-
letter-spacing设正值会让「日」「曰」「口」更难区分，设负值可能引发字符重叠；仅在易混淆字形集中段落（如术语表）谨慎用0.05em，不全局启用 -
word-spacing对中文完全无效——中文无空格分词，该属性不触发断词，还可能干扰渲染 - 禁用
text-align: justify配合letter-spacing: normal，后者在某些字体下反而削弱辨识度
真正影响可读性的，从来不是“加什么”，而是“去掉什么”：去掉多余空格、去掉非法嵌套、去掉固定像素值、去掉未声明lang的justify。
