CSS Font 单位

了解 CSS font 各个单位的意义，搜了一些资料。

[1]

绝对单位

• cm (centimeter 厘米)
• mm (millimeter 毫米)
• in (inch 英寸)
• pt (point 点)
• pc (pica 派卡)

相对单位

• em (em = 目标元素像素值 / 父元素 font-size 的像素值) [3]
• ex (约为小写字母 a, c, m, o 之类的高度) [1]
• px (pixel 像素)

em

有的文章（书）会提到 em 是指大写字母 M 的宽度（[4] P57）。那是已经过时的说法，现在很多字体的 M 其实占不到 1em 的宽度。[2]

只用 em 和 px

例子来自 www.w3.org

0.5pt, 1px, 1pt, 1.5px, 2px

如果前面四根线看起来一样（或者 0.5pt 的看不见了），你应该是在用不能显示小于 1px 点的电脑显示屏。如果能看到线的厚度递增，你应该在看高质量电脑显示器或打印的纸张。如果 1pt 看起来比 1.5px 厚，你可能在用手持设备。

当需要排列文字与图片的时候用 px 比较合适。

而字体更好是用 em 。（一）不要设置 body 的 font 大小，因为默认大小是读者可以舒适阅读的大小。（二）用 em 设置其它元素大小，比如 2.5em 就是 body 字体的 2.5 倍大小。

只有在设置打印字体的时候才用 pt/cm/in 单位。

新型单位

• rem (root em 就是依据根元素字体大小的比值，em 会叠加，rem 不会)
• vw (window 宽度的 1/100)
• vh (window 高度的 1/100)

参考

1. www.w3.org
2. wikipedia
3. developer.mozilla.org
4. 《CSS设计指南(第3版)》