在font-size CSS属性中，半个像素是什么意思？ [英] What does half a pixel mean in the font-size CSS property?

问题描述

我目前正在进行网站重新设计，并收到来自代理商所需更改的列表。

I'm currently working on a website redesign and I'm receiving a list with the required changes from an agency.

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

The header menu of the site currently has the following styles:

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

在我收到的其中一个文档中有一个更改请求，要求我将这些样式更改为：

In one of the documents I have received there's a change request that requires me to change those styles to:

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

我知道EM与十进制值一致，但字体的一半意味着什么尺寸？我已经尝试使用检查器从 12 更改为 11.5 和 11 更改字体大小，并更改 11 到 11.5 是可见的，但从 11.5 到 12 的移动只有一点（我只有间距改变一点，在所有3个示例中设置为 1em ）。您可以查看下面的屏幕截图：

I know that the EMs are OK with the decimal values but what does half a pixel mean in the font size? I have tried to change the font size using the inspector from 12 to 11.5 and to 11 and the change from 11 to 11.5 is visible but the one from 11.5 to 12 it moves just a little (I thins only the spacing changes a little, but it is set to 1em on all 3 examples). You can check the screen-shots below:

那么这半个像素在网页上下文中意味着什么？

So what does that half a pixel mean in the context of a web-page? Is this cross-browser and what does that .5 pixel do to the font-size?

推荐答案

我认为有区别。您忘记了网页的缩放级别。

I think there is a difference. You forgot about the Zoom level of the page.

示例：

<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％，我们可以看到有一个区别：

If we zoom to 500%, we can see there is a difference:

我认为您的浏览器必须四舍五入，因为半像素（真实像素）不存在。

I think your browser has to round it because half pixels (real pixels) don't exist.

缩放100％：

回合（12 * 1.00）= 12

Round(12 * 1.00) = 12

回合（11.5 * 1.00）= 12

Round(11.5 * 1.00) = 12

缩放500％：

圆形（12 * 5.00）= 60

Round(12 * 5.00) = 60

圆形（11.5 * 5.00） = 58

Round(11.5 * 5.00) = 58

这篇关于在font-size CSS属性中，半个像素是什么意思？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！