浏览器缩放时内联文本元素高度计算规则及一致性方案

缩放场景下内联文本元素的高度计算规则 #

内联文本的高度波动完全是浏览器渲染时的像素对齐逻辑导致的，计算流程分三步：

• 第一步先算基准高度：不管缩放比例是多少，浏览器首先读取字体文件内置的上伸部（ascent）、下伸部（descent）、行间距（line-gap）参数，结合当前设置的font-size算出纯文本内容区的理论高度，这个值是精确的CSS像素浮点数。以提问中提到的Iosevka字体15px字号为例，基准高度就是15px * (96.7% + 28.3%) = 18.75px，这个值不会随缩放变化。
• 第二步做物理像素换算：浏览器会把当前页面的缩放比例转成缩放系数，比如125%缩放对应1.25倍系数，把第一步算出的基准高度乘以系数，得到对应物理屏幕上的实际渲染像素值。
• 第三步取整后反推CSS像素：这是高度波动的核心原因——屏幕无法渲染非整数的物理像素，浏览器为了避免文本模糊，会把换算后的物理像素值就近取整到整数，取整完成后再除以缩放系数，反向换算回开发者工具中显示的虚拟CSS像素高度。表格里测到的各种非整数、和理论值不符的高度，全是这一步取整后倒推出来的结果。

注：表格里400%缩放对应的18.75%属于测量时的单位显示错误，实际值应为18.75px。

如果给元素设置了非默认的line-height，浏览器还会把行高多出的差值拆成两半加到内容区上下，这部分数值同样会经过「乘缩放系数→物理像素取整→反推CSS像素」的流程，也会带来小幅高度偏差。

全缩放级别下保持高度一致的可行方案 #

只要依赖内联元素的自然内容区高度，就不可能完全绕开亚像素取整带来的波动，要实现高度固定可以用下面两个经过验证的方案：

• 方案一（稳定性最高，优先选用）：将目标文本元素的display属性设为inline-block，显式设置固定height和等值的line-height，加上overflow: hidden做裁剪。示例代码：

.text-unit {
  display: inline-block;
  height: 19px;
  line-height: 19px;
  overflow: hidden;
}

这个方案下元素的盒模型高度完全由设置的固定值决定，不会受字体度量和亚像素取整影响，所有缩放级别下的CSS像素高度都保持固定，背景色可以完整填充整个高度区域，和其他元素对齐不会出现偏移。唯一的影响是当设置的高度略小于字体自然内容区高度时，字形上下边缘会有极少量裁剪，对于Iosevka这类排版规整的字体来说几乎感知不到。

• 方案二（无字形裁剪，适合内容展示场景）：给内联元素设置line-height: 1，通过精确计算的上下内边距把元素撑到目标高度，配合box-sizing: border-box。内边距不要用整数值，精确到两位小数即可，比如15px字号下要做19px高度，上下padding各设为0.125px即可。这个方案可以把高度波动控制在0.5px以内，肉眼几乎无法感知对齐偏差，但极端缩放比例下还是会有亚像素级的微小浮动，做不到100%数值固定。

内容的提问来源于stack exchange，提问作者curiousdannii