What does half a pixel mean in the font-size CSS p

问题:

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;

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?

回答1:

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

Example :

<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>

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.

Zoom 100% :

Round(12 * 1.00) = 12

Round(11.5 * 1.00) = 12

Zoom 500% :

Round(12 * 5.00) = 60

Round(11.5 * 5.00) = 58

回答2:

The font-size property is used as a parameter when the browser draws characters, so it affects the size of glyphs. But when glyphs are rasterized to bitmaps, the effect of, say, increasing font-size by 0.5px may vanish. Browsers may perform rasterization in different ways. Moreover, they may or may not use subpixel rendering, and in different ways.

If line-height has been set to 1em and font-size is increased from 11.5px to 12px, then the height of the line box may remain the same or be increased by one pixel, depending on the rounding applied by a browser.