pt and px
In the css style of html design fonts, some fonts are set to 14pt instead of 14px. What is pt and what does it have to do with px?
pt(point) is a commonly used unit in the printing industry, equal to 1/72 Inches, which means absolute length. px (pixel) refers to pixels, which are the most basic points for displaying data on the screen, and represent relative sizes. The display of px elements with the same length under different resolutions will be different. For example, the same size of 14px will be displayed smaller under a 1366*768 display screen, and will be relatively large under a 1024*768 size display.
The conversion rule between px and pt is very simple. In the default display setting, the text is defined as 96DPI. From the formula px=pt*DPI/72, pt=px*3/4 can be obtained.
em and rem
em are relative length units, relative to the font size of the text in the current object, that is, the calculation of em is based on the font-size of the parent element. such as:
- <body style="font-size:14px">
- <p style="font-size:2em">My font display size here is 28px(14px*2)</p>
- <div style="font-size:18px">
- <p style="font-size:2em">I show that the font size here is 36px (18px*2) instead of the 28px calculated above</p>
- </div>
- </body>
- <body style="font-size:14px">
- <p style="font-size:2rem">My font display size here is 28px(14px*2)</p>
- <div style="font-size:18px">
- <p style="font-size:2rem">I show that the font size here is 28px (14px*2), because I calculate it based on the font-size of the html root element</p>
- </div>
- </body>