Chrome 107中HTML根元素font-size计算值不符问题咨询

问题描述 #

将HTML根元素的font-size设置为50%，按Chrome默认16px计算应得到8px，但通过DevTools查看实际值为9px。已将Chrome最小字体大小设为0，使用版本为107.0.5304.121。

代码示例：

html { font-size: 50%; }

核心原因 #

1. Chrome字体渲染的整数近似机制 #

Chrome的Blink引擎在处理小字体尺寸时，会有内置的整数像素优化逻辑。即使理论计算值是8px，浏览器为了保证字体渲染的清晰度，会自动将其调整到最接近的可稳定渲染的整数像素值（9px）。这种调整不受“最小字体大小”设置的完全控制，属于引擎底层的可读性优化。

2. 系统DPI缩放的叠加影响 #

如果你的操作系统设置了非100%的DPI缩放比例（比如125%、150%），Chrome会同步应用这个缩放系数。此时理论上的8px会被系统缩放进一步调整，最终渲染值可能因浏览器和系统的协同计算出现偏差，表现为9px。

3. 特定Chrome版本的内置阈值 #

在107.x这类较旧的Chrome版本中，存在对极小字体的强制提升逻辑。即便手动将最小字体设为0，浏览器仍会为了可读性，将低于某个阈值的字体大小向上调整，8px刚好触发了这个阈值。

验证方法 #

可以直接设置固定像素值测试：

html { font-size: 8px; }

• 如果实际渲染为8px，说明百分比计算时的近似是问题根源；
• 如果仍显示9px，则确认是Chrome对8px字体的强制提升机制导致。

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