无单位 line-height(如1.6)虽随 font-size 缩放,但无法保证跨断点视觉节奏一致;小屏需降低至1.45增强紧凑感,标题缩小时应单独设1.2以维持视觉重量,现代中文字体隐性行距膨胀需实测微调。

line-height 无单位值不能完全替代断点微调
无单位 line-height(如 1.6)确实会随 font-size 自动缩放,但它只控制“倍数”,不保证视觉节奏一致。当字号在断点间大幅变化时(比如从桌面端 18px 降到移动端 14px),同一倍数产生的绝对行高差可能破坏呼吸感:14px × 1.6 = 22.4px,而 18px × 1.6 = 28.8px —— 差值达 6.4px,这在小屏上容易显得空洞,在大屏又略显局促。
真正需要微调的,是「行高与字号的比例关系」在不同密度下的观感反馈,而非技术上“必须”改。
移动端小字号下 line-height 偏高是常见错觉
实际测试中,font-size: 14px 配 line-height: 1.6 在 iPhone SE(375px 宽)上常显松散,不是因为计算错了,而是:
- 小字号本身视觉重量轻,过大的行距会放大空白,削弱段落凝聚力
- Retina 屏锐度高,文字边缘更清晰,进一步强化了“空”的感知
- 用户拇指操作区域有限,过长的垂直滚动距离影响阅读耐心
这时把 line-height 降到 1.5 或 1.45,配合 font-size: 14px,能回归更紧凑、可控的文本块节奏。
大标题在断点缩小时为何要单独降 line-height
标题(h1–h3)通常用较大字号+较紧行距营造视觉重量。但响应式缩放后,比如 h2 从 32px 缩到 20px,若仍保持 line-height: 1.3,其绝对行高从 41.6px → 26px,降幅近 40%,而人眼对标题的“紧凑感”预期没变 —— 结果就是移动端标题看起来“发虚”、“站不稳”。
解决办法不是统一拉高所有标题的 line-height,而是:
- 在
@media (max-width: 768px)中为标题单独设line-height: 1.2或1.15 - 避免用
em或%写法,防止嵌套放大 - 搭配
margin-bottom补足段落间距,别指望靠line-height承担全部留白职责
思源黑体、HarmonyOS Sans 等现代中文字体自带行距膨胀
这类开源字体默认 line-gap 较大,即使你写了 line-height: 1.4,浏览器实际渲染的行框高度仍可能接近 1.55。这种“隐性膨胀”在桌面端被字号撑开后不明显,但一到移动端小字号下就立刻暴露:文字像浮在行中,上下留白失衡。
验证方式很简单:
- 给段落加
border: 1px solid red,观察真实行框范围 - 对比系统默认字体(如 PingFang SC)与思源黑体在同一
line-height下的渲染差异 - 微调时优先试
line-height: 1.35起步,而非直接砍到1.2
最易被忽略的是:字体加载完成前的 FOIT/FOUT 阶段,后备字体和 Web 字体的 line-gap 不一致,会让 line-height 的微调效果在首屏闪动一次 —— 这不是 bug,是字体度量切换的必然结果,得靠 font-size-adjust 或预设容器高度来缓冲。


















