Is decimal precision when specifying a font-size r

2019-02-09 08:53发布

问题:

If I use the following CSS:

p {
    font-size: 20.5px;
}

Will all browsers draw that as 20.5px, or will some round the value?

回答1:

Decimals are not rounded consistently in all browsers. The best post I could find is here: Browser Rounding

This contains a table that shows the following:

Internet Explorer 7 truncate to 2 decimal places
Internet Explorer 8 truncate to 2 decimal places
Internet Explorer 9 truncate to 2 decimal places
Internet Explorer 10    truncate to 2 decimal places
Internet Explorer 11    truncate to 2 decimal places
Firefox 3.0 truncate to 3 decimal places
Firefox 3.5 truncate to 3 decimal places
Firefox 31  truncate to 3 decimal places
Chrome 20   round to 15 decimal places
Chrome 21   round to 15 decimal places
Chrome 37   round to 13 decimal places
Safari 6 (OSX Lion) round to 15 decimal places
Safari 6.1 (OSX Mountain Lion)  round to 15 decimal places
Safari 7 (OSX Mavericks)    round to 15 decimal places
Mobile Safari 7 (iOS7)  round to 15 decimal places
Mobile Safari 8 (iOS8)  round to 15 decimal places
Chrome 36 (Jelly Bean) [Nexus5] round to 15 decimal places
Chrome 30 (KitKat) [S5] round to 15 decimal places
Android Browser 4 (Jelly Bean) [Nexus7,Nexus4,S4,S3]    round to 15 decimal places
Android Browser 4 (Ice Cream Sandwich) [Nexus,KindleFire2]  round to 15 decimal places
Android Browser 4 (Gingerbread) [S2]    truncate to 3 decimal places
Opera 12    truncate to 2 decimal places
Opera Next 24   round to 13 decimal places


回答2:

All latest versions of browsers allow for sub-pixel rendering*. See the research and the table of differences between browser versions.

Older browsers mostly round the pixels down. Most notable exception is IE8 and IE9 which round to the nearest integer (IE7 does also round down, IE10 and up use sub-pixel rendering).

* If you define the size in percentages, the value in pixels might be different as when you directly define it in pixels.