半个像素在font-size CSS属性中的含义是什么？

Question

我目前正在重新设计网站，并且我收到了一份包含代理机构所需更改的列表。

网站的标题菜单目前有以下样式：

line-height: 1em;
font-size: 11px;

在我收到的其中一份文件中，有一项变更请求要求我将这些样式更改为：

line-height: 1.2em;
font-size: 11.5px;

我知道EM的十进制值是可以的，但字体大小的半个像素是什么意思？我尝试使用检查器从 12 到 11.5 和 11 以及从 11 到 11.5 是可见的但是从 11.5 到 12 的那个它只移动了一点（我只是间距变化了一点，但它在所有3个示例中设置为 1em ）。您可以查看以下屏幕截图：

那么半个像素在网页的上下文中意味着什么呢？这是跨浏览器吗？ .5 像素对字体大小有什么影响？

Answer 1

我认为存在差异。您忘记了页面的缩放级别。

示例：

<p style="display: inline-block; font-size: 12px; border : 1px red solid;">
aAa
</p>
<p style="display: inline-block; font-size: 11.8px; border : 1px red solid;">
aAa
</p>
<p style="display: inline-block; font-size: 11.5px; border : 1px red solid;">
aAa
</p>
<p style="display: inline-block; font-size: 11.2px; border : 1px red solid;">
aAa
</p>
<p style="display: inline-block; font-size: 11px; border : 1px red solid;">
aAa
</p>

如果我们缩放到500％，我们可以看到存在差异：

我认为您的浏览器必须对其进行舍入，因为半像素（实际像素）不存在。

缩放100％：

回合（12 * 1.00）= 12

回合（11.5 * 1.00）= 12

缩放500％：

回合（12 * 5.00）= 60

回合（11.5 * 5.00）= 58

Answer 2

当浏览器绘制字符时，font-size属性用作参数，因此它会影响字形的大小。但是当字形被栅格化为位图时，font-size增加0.5px的效果可能会消失。浏览器可以以不同方式执行光栅化。此外，它们可能会或可能不会使用子像素渲染，并以不同的方式。

如果line-height已设置为1em且font-size从11.5px增加到12px，则行框的高度可能保持不变或者增加一个像素，具体取决于浏览器应用的舍入。