2014
Jan
09
「pt, px, em, % 」， These properties are the font size of CSS. First, "em" is the same with "%", this is meaning for percentage of font. If you type 50% so that the font will be the 50% size of normal font.
- 1em=100%=12pt=16px
- 0.75em=75%=9pt=12px
"pt": The font size for printer.
"px": This unit is meaning pixel.
"em": 1em = 100% = 12pt = 16px = The default size of browser.
It is often 16px in most browser. We could use nested "em" to set the font size. For example, I set 2em to the first div and set 0.5em to the child div. Then the font size of child div will be 2*0.5, it is equal to 1em.
"percent(%)" : It is the same with "em".
| 1em | 100% | 12pt | 16px |
| ECAE | ECAE | ECAE | ECAE |
| Property "pt" | 8pt | 9pt | 10pt | 11pt | 12pt | 13pt | 14pt | 16pt |
| Test | Test | Test | Test | Test | Test | Test | Test |
| Property "px" | 8px | 9px | 10px | 11px | 12px | 13px | 14px | 16px |
| Test | Test | Test | Test | Test | Test | Test | Test |
| Property "em" | 0.6em | 0.8em | 1em | 1.2em | 1.5em | 1.6em | 2em > 0.5 | 3em > 0.3 |
| Test | Test | Test | Test | Test | Test | Test | Test |
| Property percentage | 40% | 60% | 80% | 100% | 150% | 180% | 200% > 50% | 300% > 0.3 |
| Test | Test | Test | Test | Test | Test | Test | Test |