网页中的各种长度单位

制作网页时首先遇到的经常就是各种长度单位的问题，现在总结一下。

点（point），有时翻译为磅，简写为pt，是绝对长度的单位，规定1英寸等于72点，即1in = 72pt。

像素（pixel），简写为px，经常说的屏幕分辨率就是用这个单位来衡量的。px 是相对长度的单位，实际的长度由下面的 DPI 决定。

DPI（dots per inch）或者 PPI（pixels per inch），每英寸的像素数目，即 1in = DPI px。DPI 可以在操作系统里设置，在 Windows 中默认 DPI 为96，也可以改为 120，在 MacOS 中默认 DPI 为 72。

因此我们就有 1px = 1pt * DPI / 72 这个换算公式。例如，在使用 Windows 默认的 96 DPI 时，12px = 9pt。

在网页中还经常使用em这个单位，它最初是指字母M的宽度，现在默认为1em = 16px。em 和 px 的一个区别在于，1em 的长度是可以调整的，例如在 CSS 中指定 body {font-size: 75%}，则 1em 的长度就变成 12px。em 和 px 的另一个区别在于，em 会继承父级元素的字体大小。

另外还有 ex 这个长度单位，它指的是字母x的高度。ex 和 px 的换算关系与具体的浏览器以及字体有关，不够稳定，因此很少人使用它。

对于一个字体大小，font-size，它的高度由三部分组成：font-size = ascender + x-height + descender。其中 x-height 就是上面说的 ex 高度。ascender 是比 x 字母高的那部分，而 descender 是比 x 字母低的那部分。

参考资料：

[1] px - em - % - pt - keyword | CSS-Tricks（翻译）
[2] Point (typography) - Wikipedia
[3] Em (typography) - Wikipedia
[4] 基线 - 维基百科
[5] 升部 - 维基百科
[6] 降部 - 维基百科
[7] What Is X-Height, Leading, Kerning, Tracking, Ascender, Descender
[8] Baseline - a designer framework by Stephanecurzi.me

[YAML] Date: 2011-05-09 15:47:39, Updated: 2013-06-15 12:38:00