CSS text size units px, EM, PT

Quoted here is Jorux's "95% Chinese web site needs to rewrite the CSS" article, the topic is a bit scary, but it is now a number of domestic web page production defects. I have not been clear about the relationship between PX and EM and the characteristics, after seeing the harvest is really great. Usually use PX to define fonts, so can not use browser font amplification function, and most foreign websites can be used under IE. Because:

1. IE cannot adjust the font size used for PX as the unit;

2. Most of the foreign websites can be adjusted because of their use of EM as font units;

3. Firefox can adjust px and em, but more than 96% of Chinese netizens use IE (or the kernel).

px Pixels (Pixel) are relative length units, and pixel px is relative to the screen resolution of the Monitor. (citation from CSS2.0 manual)

EM is the relative length unit, relative to the font size of the text within the current object. If the font size of the current text in the row is not set artificially, it is relative to the browser's default font size. (citation from CSS2.0 manual)

The font unit uses EM to support font scaling under IE6, press CTRL + Wheel on the page, and no response for fonts in PX.

PX is an absolute unit and does not support the scaling of IE.

EM is the relative unit, the text in the Web page can be enlarged and shrunk. Use EM for both line spacing (line-height) and vertical height units. Ensure the integrity of the zoom time.

The default font height for any browser is 16px. All the unadjusted browsers are compliant: 1EM=16PX. So 12px=0.75em,10px=0.625em. In order to simplify the conversion of font-size, it is necessary to declare font-size=62.5% in the body selector in 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 replace EM as the unit.

EM has the following characteristics:

1. The value of EM is not fixed;

2. Em will continue the font size of the parent element.

So when we write CSS, we need to be aware of:

1. The body selector declares font-size=62.5%;(font-size=63%; for IE6 compatibility)

2. Divide your original PX value by 10, then replace EM as the unit;

3. Recalculate the EM values of the enlarged fonts. Avoid duplicate declarations of font size.

That is to avoid the 1.2 * 1.2 = 1.44 phenomenon. For example, if you declare a font size of 1.2em in #content, then you can only 1em when declaring P's font size, not 1.2em, because this em is not the other em, and it becomes 1em=12px because it continues to #content the font height.

But the exception of 12px Chinese characters is that the 12px (1.2em) size of Chinese characters obtained by the above method is not equal to the font size defined directly with 12px, but slightly larger. This problem Jorux has been resolved, only in the body selector in the 62.5% to 63% can be normal display. The reason may be that when IE deals with Chinese characters, the precision of floating-point values is limited. Don't know if there's any other explanation.

Description of Unit PT

In typography, point is an absolute value, which equals 1/72 inches and can be measured by a ruler, in physical inches. But the meaning of PT in CSS is not so. Because our display is split into pixels, a single pixel can only have one color (for simplicity, the sub pixel anti-aliasing technique is not discussed here), to be displayed on the screen, you must first convert the length in PT to the length in pixels, which is the media of the conversion, which is the DPI (in fact, The so-called DPI here is the term used in operating systems and browsers, which is PPI, pixels per inch, and the DPI in scanners, printers, and digital cameras are different concepts.

For example, no matter which operating system the Firefox browser defaults to the DPI is 96, then actually 9PT = 9 * 1/72 * = 12px.

So, although "I" in "DPI" and "1pt equals 1/72 inch" in "inch" do not represent physical inches, these two units are equal to each other and are lost in the multiplication.

So how does a real physical length count? Please take out a ruler and measure the visible width of your display (I am here 11.2992 inches), divided by the horizontal resolution (I am 1024 pixels here), and I get the physical length of each pixel.

Now we can answer the question, how wide is the 9pt font on the Web page? The answer is: 9 * 1/72 * 96 * 11.2992/1024 = 0.1324 inches = 0.3363 cm.

Although PT is an absolute unit, it is a very useful font unit in the Text Typesetting tool (Word,abobe) only for output devices. The result of printing on paper is the same, regardless of the resolution of the Monitor.

But the Web page is mainly for screen display, not for printing and other needs. PX can accurately represent the position and size of the element in the screen.

Of course. When the DPI is 96, 9pt=12px.

With PX, EM,% and PT conversion table

px, EM,% and PT conversions