The font-size properties of CSS and the use of EM value

Definitions and usage

Font-size property to set the size of the font.

Description

This property sets the font size of the element. Notice that it actually sets the height of the character box in the font; the actual character glyphs may be higher or shorter (usually shorter) than the boxes.

The fonts corresponding to each keyword must be higher than the corresponding font for a minimum keyword, and less than the font corresponding to the next largest keyword.

Possible values

Instance

To set the dimensions of different HTML elements:

xml/html code to copy content to clipboard

h1 {font-size:250%;}

h2 {font-size:200%;}

p {font-size:100%}

On the use of EM value

CTRL + mouse wheel to enlarge the page, will bring a small bug, is to assume that the page does not have a scroll bar, which will appear scrollbars, and through the font-size can solve this small bug, thereby enhancing the user experience.

The browser general default font size is 16px,16px=1em, so the conversion, 1px=0.0625, so if we want to set the size of the font 12px, then 0.75em, and so on to set the font size EM value is 0.0625* target px size value, Note that the EM value inherits the font size value of the parent. But in fact if the percentages and EM fit together will be more powerful and more convenient.

Browser default font size is 16px, so 16px=100%, then 1px=6.25%,10px=62.5%, so if we define font-size:62.5% inside the body, the default font size of the browser is 10px, Above we said that EM will inherit, so at this time 10px=1em, so 12px=1.2pm,16px=1.6pm, so that is not in the definition of font EM unit size value is much simpler, but to note that IE under the problem of parsing, The body should be 63% when defining the font size.

Finally, if you need to define the value of EM units, first in the body to define font-size:62.5%, in order to be compatible in IE browser needs to write font-size:63%, and then set the size of the font size divided by 10 is the EM value.