再谈网页设计中的em与px

回应hax大牛在“em or px“的讨论:

上次看到你在我分享的friendfeed上面的评论我就想好好讨论一下这个问题了。’em’是从字体设计上面继承的一个概念,是指字模的高度,一般书上会说em能够保证不同字体的大写X的高度保持一致。那么大写X的高度就是这个字体的em。

你说的px是相对单位不仅在你说的显示器尺寸上是相对的,而且由于大部分的矢量元素的渲染来说比较先进的浏览器都支持“半像素平滑”,连像素内的颜色的投影也可以是相对的(渲染引擎会进行像素平滑的计算)。

在网页渲染的布局上来说它要转化em到px这个单位,就是说在一定的zoom下两者是等价的。

但是为什么我还是很支持使用em作为首选的字体和布局单位呢?当然这不是用来保证一行到底可以显示多少文字,因为px也可以保证。主要目的是区分布局中“缩放友好”的矢量元素(如字体,布局相关的所有html元素)和“缩放不友好”的标量元素(如很多“替换元素”是不友好的,典型的如图片,还有在使用某些Windows主题以后的input元素)。在使用webkit的浏览器,缩放会更加友好,文字和布局会随缩放变化,但是图片等却保持原有的最佳尺寸。Firefox3以后所使用的全部缩放我觉得在有些时候是有用的,可是总有它让你不爽的地方⋯⋯

比如如果你在某些设计场合希望容器变大文字尺寸不变,从而在缩放显示更多内容。另外一些地方你希望容器和文字尺寸一起变化。px和em的配合让两种需求可以比较容易的在同一个页面出现。

从设计为内容服务的角度考虑,使用em作为基本单位可以让你更集中于“内容驱动”,避免过分的”设计驱动“。我的工作范畴内前者更常见,也更符合客户的需求。

3 thoughts on “再谈网页设计中的em与px”

  1. em是大写X高度这个我倒没听说过。我只知道ex是小写x高度,并且x-height是字体排版中的非常重要的概念。

    针对屏幕的浏览器中,网页样式计算出来的最后结果(computed value或used value),都是以px为单位,而且是允许小数的。“半像素平滑”带来的区别,可以认为是在actual value上,原本必须取整,即渲染引擎只支持整数,现在渲染引擎支持了小数——虽然屏幕上的物理像素总是离散的。

    你后面说的意思我反复考虑了2个小时,觉得值得深入探讨。你提出的将em用来标示“缩放友好”(实际我觉得是“文字缩放友好,text zoom friendly”,具体我们再讨论)这个问题,不仅涉及页面的设计,也涉及浏览器的设计。它还暗示了引入css新长度单位rem的必要性。有机会和你当面聊,然后再做总结。

    btw,偶属羊不属牛。。。

  2. BTW,这个页面的默认字体好像小了一点。comment的字都看不清了。不过倒是正好做你的zoom friendly的样本。。。

  3. 关于计算值的你说的很详细,现代浏览器都可以在actual value里面使用小数。不过我观察IE6/7好像并不支持半像素,因为之前我fix一些半像素造成的bug的时候发现IE并不受影响。
    css3里面的rem这个单位感觉只是一个更方便的(不继承)的em。现在的情况下em已经工作的不错了,起码对于我比较喜欢的safari来说。你所说的ex和em(还有百分比)很相似,都是相对单位(Relative length units),他们都是相对于绝对单位(如px和gd)所言,我认为css设计的本意就是解决不同的缩放效果(和不同的设备映射关系)的。
    从《写给大家的设计书》这样的从设计角度考虑内容的书里面推荐字体尽量一致,如果不一致则尽量不一致,基于这样的理念,使用em比较流畅。当然这个和使用的字体有关,中文字体一般不能保证缩放平滑(尤其是linux和windows),所以倾向使用px是合理的。可惜我目前所做的英文应用比较多,英文字体缩放相对平滑(尤其是放大),所以我们选择em就比较流畅。
    FF3和IE8里面那样的缩放并非我所希望的样子,这个角度如你所说em/rem可能是个很重要的单位了。

    BTW:我太懒了,用的wp的默认主题,这个字号绝对是为英文设计的。待我老婆批准时间我修改个theme出来……

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.