Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is decimal precision when specifying a font-size respected by all browsers?

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?

like image 779
Jonny Avatar asked Jan 14 '15 16:01

Jonny


People also ask

What is the default font-size value in browser?

Set Font Size With Em The default text size in browsers is 16px. So, the default size of 1em is 16px.

Can you use decimals in CSS?

Although you can use decimal places in CSS like 100.0% in reality it best to keep to real numbers for percentages and only upto one decimal place with standard linear integer values. Your 2.9… probably would be read as 3. Furthermore you have to remember many elements use padding, margins and borders.

Which is the proper way to choose the type size to be used in CSS?

You should set the font-size in the body tag to 100% . That way, people who visited your site will see the text at the right size for what they have set in their browser. For instance, people with low vision may set the text size larger. If your font-size is set to 100% , they should see it exactly as desired.


2 Answers

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
like image 176
citizenen Avatar answered Oct 17 '22 03:10

citizenen


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.

like image 36
Lode Avatar answered Oct 17 '22 04:10

Lode