字体垂直位置在不同显示器间偏移的原因是什么？

我发现文本的垂直位置在不同屏幕间出现偏移（见截图）。
第一张截图拍摄于2021款MacBook Pro（254ppi），另一张拍摄于Dell u3421we显示器（109ppi）。可以看到Mac屏幕上文本上下的空白是均衡的，但切换到戴尔显示器后，空白变得不均衡。

MacBook屏幕效果 #

Dell显示器效果 #

我尝试调整baseline属性等设置，但毫无效果！请问我遗漏了什么？造成该问题的原因是什么？

问题原因及解决方案 #

1. PPI缩放与像素对齐差异
   不同PPI的屏幕系统会采用不同缩放比例，Mac Retina屏幕默认2x缩放，Dell低PPI屏幕多为1x或非整数缩放。当文本容器高度用em、rem这类相对单位时，不同缩放比例下的像素换算会导致文本基线对齐偏差，尤其容器高度无法被行高整除时，系统会自动调整空白分布。

2. 字体渲染引擎差异
   Mac采用Core Text渲染引擎，Windows系统（Dell显示器多接Windows）用DirectWrite/ClearType，两者对字体垂直度量（ascent、descent、leading）的计算逻辑不同，即便设置相同行高和对齐方式，排版结果也会有细微差别，导致上下空白不均。

3. CSS垂直对齐的误区
   vertical-align: baseline是默认值，它基于字体基线而非容器垂直居中，调整它自然没用。要实现文本在容器内垂直居中，可尝试：

   • 单行文本：设置容器高度与行高一致，如line-height: 40px; height: 40px;
   • 多行文本：用Flex布局，display: flex; align-items: center;
   • 避免用百分比值的上下内边距，改用固定像素或rem，减少缩放换算误差

4. 系统非整数缩放的影响
   若Dell显示器的系统缩放是125%、150%这类非整数比例，会出现像素对齐的舍入误差。可尝试切换为100%缩放，或用transform: translate(-50%, -50%)的方式实现垂直居中，这种方法受缩放影响更小。

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