You should know the CSS text size units px, EM, PT

Summary: This is quoted as Jorux's "95% Chinese website needs to rewrite CSS" article, the topic is a bit scary, but it is the current domestic web page production of some shortcomings. I have always been confused about the relationship between PX and EM and the characteristics, and have seen a great harvest. Usually use PX to define the font, ...

　　

Quoted here is Jorux's "95% Chinese web site needs to rewrite CSS" article, the topic is a bit scary, but it is the current domestic web page production of some shortcomings. I have always been confused about the relationship between PX and EM and the characteristics, and have seen a great harvest. Usually use PX to define the font, so the browser can not enlarge the font function, and most of the foreign sites are available under IE. Because:

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

2. Most of the foreign sites can be adjusted because they use the EM as a font unit;

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

px Pixels (Pixel) are relative length units and pixel px is relative to the display screen resolution. (quoted 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 inline text is not artificially set, the default font size is relative to the browser. (quoted from CSS2.0 manual)

Font units use EM to support font scaling under IE6, press CTRL + SCROLL wheel in the page, and the Web site with the font px is unresponsive.

　　px is an absolute unit and does not support IE scaling.

　　em is relative units, and the text in the page can be enlarged and zoomed out. The line spacing (line-height), and the longitudinal height units are all used with EM. Ensure the integrity of the zoom time.

The default font height for any browser is 16px. 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.

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. Declare font-size=62.5%;(font-size=63% in the body selector; for IE6 compatibility)

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 you declare the font size of p, not 1.2em, because this em is not em, it becomes 1em=12px because it continues to #content the 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.

　　Description of the Unit PT

In print layout, point is an absolute value, which is equal to 1/72 inches, which can be measured by a ruler, in physical inches. But in CSS the meaning of PT is not so. Because our display is divided into pixels, a single pixel can only have one color (in order to simplify, the sub-pixel anti-aliasing technique is not discussed here), to display on the screen, you must first convert the length in PT to the length in pixels, the medium of the conversion is DPI (in fact, The so-called DPI here is the term used in the operating system and the browser, that is, the PPI, pixels per inch, and the DPI in the scanner, printer, and digital camera are different concepts.

For example, in any operating system, the default DPI of the Firefox browser is 96, then actually 9PT = 9 * 1/72 * = 12px.

Therefore, although "I" in "DPI" and "1pt equals 1/72 inch" in the "inch", do not represent the physical inches, but the two units are equal to each other, also in the multiplication is about to drop.

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

Now we can answer the question, how much space does 9pt of the Web page occupy? The answer is: 9 * 1/72 * 96 * 11.2992/1024 = 0.1324 inches = 0.3363 centimeters.

Although PT is an absolute unit, it is only for output devices and is a very useful font unit in the Text Layout tool (Word,abobe). Regardless of the resolution of the Monitor, the results printed on paper are the same.

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. In the case of DPI is 96, 9pt=12px.

　　With PX, EM,% and PT conversion tables

You should know the CSS text size units px, EM, PT