像素是计算机屏幕上的不可缩放的点,而一个em就是一个字大小的方块。由于字体大小的变化,em代表用户喜欢的文字大小的相对单位。
采用印刷式的固定设计方案或许要容易些,因为如果尺寸不变,则考虑的东西就相对较少。可是如果采用弹性的设计方法,就可以充分利用电脑的显示器和浏览器。
也许你想你的网站以某种特定的方式显示,但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性,从而对网站的成功造成损害。
为了理解弹性设计,我们必须首先来看看一个似乎与此无关的问题 - 指定文字大小的几种方式。
弹性文本
显然文字是最容易实现的弹性设计的。能够设定喜欢的文字大小是用户最常见的要求,因此不可忽视。
亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人,但是有视力障碍 - 你我变老时就会成为他们的一员。使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小;拒绝提供这样的选择就剥夺了用户的主导权,很可能使用户无法舒适地阅读。
如果设计者使用像素为单位指定文字大小,大多数的用户将无法缩放文字,因为 Internet Explorer 改变文字大小的方式与别的浏览器不同。Mozilla 和 Opera 可以缩放已经设定像素大小的文字,而Windows 下的IE却不能。
em 存在的问题
Em 似乎是进行文字相对大小设定时的单位,浏览器默认的文字高度是16像素,对大多数设计者来说太大了,不合他们的口味。要使用 em,设计者一般将文字的初始大小设为小于 1em。
例如:
h1 {
font-size: 2em;
}
p {
font-size: 1em;
}
Jeffrey Zeldman过去曾经对此表示质疑,他认为尽管有其不利之处,以像素指定文字大小还是比用 em 好。这个结论是根据 Owen Briggs 所作的深入研究得出的。 Owen Briggs 测试了264种不同的文字缩放方法并演示了 em 之类的相对单位行不通。 许多设计人员现在都用像素为单位指定文字大小,不是出于精确控制网页外观的需要,而是似乎没有更为合理的其他选择。
如此看来,要么是难看的大字体,要么无法缩放,好像无法两全。别着急,接着读下去。
一种“大字体”后备样式
在与无法缩放的像素所带来的亲和力问题的战斗中,许多作者在他们的网页上使用了一种后备样式表的技术,可通过网页上的一个链接进行切换。
这种方法固然不错,但是如果和相对文字大小的措施(比如Wired News所提到的)一起使用,效果会更好。不能指望用户熟悉你的特有界 面,用户一般对浏览器的界面更为熟悉,如果他们想看大一点的字体,更倾向于用浏览器来达到而不是用你的界面。而且他们更期望这种方法在各个网站都管用,不 想每访问一个网站都改变一次。,比如Wired News
CSS 关键词
Font-size 的关键词(xx-small, medium, x-large,等等)好像就 是答案。在 IE 中,当用户选择“较大”或“最大”时文字会变大,选择“较小”或“最小”时文字会变小,一直到合适的大小。与其他的弹性设计方法不同, 使用关键字的好处是当对文字进行缩放时,永远不会使文字实际像素大小低于某个值,所以无论用户如何选择文字大小,都应当有良好的可读性。
在 ALA 的其他地方对关键字有更详尽的解说,这种方法的最好的示例也许就是你正在阅读的这篇文章。(在最近一次的改版之前,ALA 使用了后备的“大字体”样式切换,一个样式表使用像素指定文字大小,另一个用的是基于关键字的相对大小方法。)