制作网页时首先遇到的经常就是各种长度单位的问题,现在总结一下。
点(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