Specific analysis of font size units px, em, pt in Html

There are three common units for defining font size on web pages, px, em, and pt

px

px is the abbreviation of pixel, which is a unit based on pixels. During browsing the web page, the screen The text and pictures on the screen will change with the resolution of the screen. A picture with a width of 100px will occupy 1/8 of the screen width at a resolution of 800×600, but at a resolution of 1024×768, it will only occupy 1/8 of the screen width. About 1/10. Therefore, if px is used as the unit when defining the font size, once the user changes the display resolution from 800 to 1024, the text actually seen by the user will become "smaller" (natural length unit), and may even be unclear, affecting Browse.

em

em: % is a relative unit and a relative unit of length. It originally refers to the width of the letter M, hence the name em. Now it refers to the multiple of the character width, and its usage is similar to a percentage, such as: 0.8em, 1.2em, 2em, etc. Usually 1em=16px. , a universal unit generally used to measure length (such as the margins and padding of elements). When used to specify font sizes, the em unit refers to the font size of the parent element.

Given the font size of a parent element on a page, you can proportionally change the size of all elements by adjusting one element. It can be scaled freely, such as for making scalable style sheets. .

pt

PT is the abbreviation of point (pound), which is a fixed length measurement unit with a size of 1/72 inch. If you use pt as the unit of text on the web, the font size will be the same on different screens (same resolution), which may have an impact on typesetting, but it is very convenient to use pt in Word. Because the main purpose of using Word is not for screen browsing, but for output and printing. When printing to an entity, pt is convenient and practical as a natural length unit: for example, ordinary documents in Word use "Song font 9pt", titles use "Helvetica 16pt", etc. No matter how the computer is set, it will always be this big when printed. .

Conversion

The default font height of the browser is 16px, so the unadjusted browser displays 1em=16px, which means 1px=0.0625em. In order to simplify the conversion of font-size, you can declare font-size=62.5% globally in the body in CSS, which means the default font size is defined as 16px*0.625=10px. The child element will inherit the font size of the parent element. So 1em=10px, so 12px=1.2em. The conversion between px and em can be obtained through 10. However, defining font-size=0.625em or directly defining 12px has no effect.


In addition, one thing must be noted. When IE processes Chinese characters, the accuracy of floating point values ​​is limited. The 12px (1.2em) Chinese characters obtained by the above method are not equal to the font size directly defined by 12px in IE, but are slightly larger. Just replace 62.5% with 63%.

The conversion formula between pt and px is also relatively simple, pt=px times 3/4.

The above is the detailed content of Specific analysis of font size units px, em, pt in Html. For more information, please follow other related articles on the PHP Chinese website!