CSS Web page making tutorial: Font Unit EM Introduction

Just learn Web page production, the teacher once told me to use CSS to enforce the definition of font size, or to ensure that everyone see consistent effect. This is particularly evident in the current Chinese site. including NetEase, Sohu, including most of these portal sites, with the absolute unit px (pixel). However, if you consider the usability of the site, the font size should be variable, some people who do not have good eyesight need to enlarge the font to see the content of the page. However, ie, which occupies most of the browser market, cannot adjust the size of the font that uses PX as the unit. Foreign people attach great importance to the ease of use of the site, a considerable number of foreign sites have used em as a font unit.

1em refers to the size of a font, which inherits the font size of the parent element and is therefore not a fixed value. The default font size for any browser is 16px. Therefore, 12px = 0.75em. In practical applications, for easy conversion, the following styles are usually set:

HTML {font-size:62.5%;}

So, 1em = 10px. Our usual 1.2em theory is 12px. However, this conversion is not established in IE browser, 1.2EM will be slightly larger than 12px, the solution is to change the HTML tag style of 62.5% to 63%, namely:

HTML {font-size:63%;}

In the Chinese article, usually in the paragraph first empty two lattice. If you use PX as a unit, you need to empty 24px for a 12px font, and you need to empty 28px for 14px fonts ... This conversion is very generic. If you use the EM unit, the problem is very well solved, the size of 1 words is 1em, the size of the two words is 2em. So the only way to define this is to do this:

p {text-indent:2em;}