font-size CSS 属性中的半个像素是什么意思？答案

【问题标题】：What does half a pixel mean in the font-size CSS property?font-size CSS 属性中的半个像素是什么意思？
【发布时间】：2014-05-14 20:37:00
【问题描述】：

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

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

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 像素对字体大小有什么影响？

【问题讨论】：

标签： html font-size pixels css

【解决方案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

【讨论】：

【解决方案2】：

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

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

【讨论】：