The default font height of any browser is 16px (16 pixels). All non-adjustable browsers are compliant with: 1EM=16PX. So 12px=0.75em,10px=0.625em. To simplify the conversion of font-size, you need to declare font-size=62.5% in the body selector in the CSS, which makes the EM value 16px*62.5%=10px, so 12px=1.2em, 10px=1em, That means you just have to divide your original PX value by 10 and then put EM in as the unit.
12px equivalent to 9pt length;
12px equivalent to 0.75em length;
9pt equivalent to 0.75em length;
Advanced EM and PX conversions:
The default font height of any browser is 16px (16 pixels). All non-adjustable browsers are compliant with: 1EM=16PX. So 12px=0.75em,10px=0.625em. To simplify the conversion of font-size, you need to declare font-size=62.5% in the body selector in the CSS, which makes the EM value 16px*62.5%=10px, so 12px=1.2em, 10px=1em, That means you just have to divide your original PX value by 10 and then put EM in as the unit.
When we use it, we declare the initial font-size=62.5% for all the HTML tags, such as:
*{font-size=62.5%}
This later layout can be set according to the following techniques EM units
Font-size:1.2em equals font-size:12px.
Font-size:1.4em equals font-size:14px.
And so on the equivalent of the initial font-size=62.5%, the EM and PX units are only 10 times times the gap, in order to facilitate the calculation and set the EM length value to use.
EM units have the following characteristics:
1. The value of EM is not fixed;
2. Em inherits the font size of the parent element.
When we write CSS, if we want to use EM as the unit, we need to pay attention to two points:
1. Declare font-size=62.5% in the body selector;
2. Divide your original PX value by 10 and then replace it with EM as the unit;
3. Recalculate the EM values of the enlarged fonts. Avoid duplicate declarations of font size.
This is to avoid the 1.2 * 1.2 = 1.44 phenomenon. For example, when you declare a font size of 1.2em in #content, you can only have 1em when declaring the font size, not 1.2em, because this em is not em, it becomes 1em=12px because it inherits the #content font height.
However, 12px Kanji exception, is obtained by the above method 12px (1.2em) size of Chinese characters in IE does not equate directly with 12px defined font size, but slightly larger. This problem Jorux has been solved, just in the body selector to change 62.5% to 63% can be displayed normally. The reason may be that when IE processes Chinese characters, the accuracy of the value of floating point is limited. I wonder if there is any other explanation.
<!DOCTYPE HTML><HTML><HeadLang= "en"> <MetaCharSet= "UTF-8"> <title>Em</title> <style> *{margin:0;padding:0; }Div{width:300px;Height:40px;Line-height:40px;text-align:Center;margin:10px Auto;background:#ccc; }. Demo1{font-size:14px; }. Demo2{font-size:14pt; }. Demo3{font-size:1.4em; } </style></Head><Body><Divclass= "Demo1">Unit is PX</Div><Divclass= "Demo2">Unit is PT</Div><Divclass= "Demo3">Unit is EM</Div></Body></HTML>
Conversion between EM,PT and px
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
