CSS Tutorial: Recommended font-size use EM

Source: Internet
Author: User

In today's web age, which advocates usability design and user experience design, CSS is also involved. Most people in the CSS code is always defined in the overall font size, in the Chinese case is generally 12px, and in fact, in this way, in the top menu through IE "View-text size" setting has no effect. It is no doubt a bad user experience for a viewer who feels too small for the font. In fact, all this can be avoided, that is, using the EM unit as a font display unit.

The browser's default font height is 16px, so the unadjusted browser displays 1em=16px. Conversion over the words that is to say 1px=0.0625em, that is, 12px=0.75em, 10px=0.625em, through the 1px=0.0625em you can write in CSS through px into EM. But there is a more convenient way to continue looking down!

This method is used in% units (only 1 times), in fact% and em simple words can be understood as the former only 2 0 more than the latter. In order to simplify the conversion of font-size, we can first globally declare font-size=62.5% in the body of CSS, where the% algorithm is the same as EM, 100%=16px,1px=6.25%,10px=62.5%, This defines the default font size of 10px. Many beginners may define 0.625em or directly define 12PX, which is ineffective, and must define font-size=62.5%! Because EM has the character of the font size that inherits the parent bleed element, this is 1em=10px, so 12px=1.2em. PX and EM conversion through 10 can come, very convenient!

In addition there is a point must be noted, may be IE processing Chinese characters, for floating-point value accuracy is limited, in the body 62.5% out of the 12px font than the direct definition of a little bit bigger, as long as the 62.5% to 63% on it. By tweaking the CSS code above, you will find that your site is a step closer to the user experience design, which is important in today's web age, which advocates usability design and user experience design.

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>www</title>
<style type= "Text/css" >
body{
font-size:63%;
}
</style>
<body>
<p style= "FONT-SIZE:1.2EM;" >font-size:1.2em (can be adjusted) </p>
<p style= "FONT-SIZE:12PX;" >FONT-SIZE:12PX (Unable to adjust) </p>
<p style= "FONT-SIZE:1.2EM; Color: #F90; > You can adjust the font display size by "View-text size" On IE top menu </p>
</body>

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.