文字排版体验差，90%不是字体问题，而是line-height、letter-spacing、text-align和writing-mode未配对；line-height须用无单位值（如1.6）而非px，否则缩放或高dpi下错乱；中文正文推荐1.5–1.8，竖排可调至1.8；两端对齐需text-align: justify + text-justify: inter-character且lang="zh"；letter-spacing优先em单位；writing-mode: vertical-rl需配合text-orientation、margin-inline等属性。
直接说结论：文字排版体验差，90%不是字体问题，而是line-height、letter-spacing、text-align和writing-mode这四个属性没配对，尤其在中英文混排或竖排场景下，错一个就全崩。
line-height设成无单位数值而不是px
这是最容易踩的坑。用line-height: 24px看似精确，但一旦用户缩放字体、切换系统字号或进入高DPI屏，行距立刻错乱——因为它是绝对值，不随font-size变化。而line-height: 1.6是相对值，浏览器会自动按当前字体大小计算（比如16px × 1.6 = 25.6px），响应式更稳。
- 中文正文推荐
line-height: 1.5–1.8，太小易粘连，太大显松散 - 竖排时
line-height实际控制的是“列间距”，建议略调高（如1.8）避免字符上下挤压 - 如果父容器用了
writing-mode: vertical-rl，line-height依然有效，但方向已转为垂直轴
中文两端对齐必须加text-justify: inter-character
text-align: justify单独写在中文段落上基本没反应，不是你代码错了，是浏览器默认不在汉字间插空隙。必须组合使用：text-align: justify + text-justify: inter-character，且父级或自身要带lang="zh"。
- 只在Chrome 120+、Firefox 110+、Safari 17.4+支持，旧版本会静默回退为左对齐
- 段落少于4行时效果不可靠，末行大概率仍左对齐
- 单行两端对齐要用
text-align-last: justify，但iOS Safari 14.5以下不支持 - 中英文混排建议加
word-break: keep-all，防止英文被强行断开
letter-spacing慎用px，优先选em
给标题加字间距很常见，但letter-spacing: 2px在字体放大后会显得过疏。用letter-spacing: 0.08em更合理——它随font-size等比缩放，比如标题从24px变到32px，间距自动从1.92px升到2.56px，视觉比例不变。
- 中文一般
letter-spacing值很小，0.02em–0.08em足够；过大（如>0.15em）会明显降低可读性 - 该属性会继承，如果
p里套了span，子元素也会带上，需主动重置letter-spacing: normal - 手写体、书法类字体常需微调，否则笔画易重叠
竖排布局别只写writing-mode
writing-mode: vertical-rl只是第一步。真正让竖排可用，还得配text-orientation和方向适配的margin/padding。
-
text-orientation: mixed（默认）让英文字母保持横排，适合常规混排；text-orientation: upright强制所有字符直立，适合纯艺术排版 - 竖排后
margin-top变成“左外边距”，margin-bottom变成“右外边距”，容易误判，建议统一用margin-inline-start/margin-inline-end - 若需多列竖排，用
column-count比Flexbox更可靠，但必须设固定height，否则列数不生效 - IE10–11不支持
writing-mode，降级方案得用transform: rotate(90deg)+ 绝对定位，且要手动调transform-origin
最常被忽略的一点：所有这些属性在移动端的渲染表现，和桌面端不完全一致——尤其是text-justify和text-orientation，iOS Safari 和 Android Chrome 的支持节奏差半年以上，上线前务必真机测。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
