使用关键字和百分比来设定页面文字的大小，以允许用户控制并 实现最大程度的灵活性

在 Web 设计领域中，“如何设定页面文字的大小”是为数不多的充满争议的著名话题之一。从历史上看，它以让初学者困惑，引发争论以及划分支持者和反对者阵营而著称。这么说也许夸张了点，不过对许多人而言，它确实是个棘手的问题。

我无意要当争论的调停人，在本章中，我只想和大家分享这样一种设定 Web 页面的文字大小的策略：它具有高度的灵活性并易于实现，同时也能尽可能地保证对设计细节的全权控制。

让文字大小的设定具有灵活性，是本章中各个范例的核心指导思想。赋予用户控制页面文字大小的能力，也就是提供了更好的页面可读性。然而，真正的挑战在于：如何在保持灵活性的同时仍能进行精确巧妙的细节设计。本书中包含大量的示例，在您读完本书之后，应该就能轻松应付这类挑战了。

让我们首先来看看目前常见的设计方式，并分析为什么这样做缺乏灵活性。

1.1　常见的方法

关于文字大小设定的通常方法，这里可以举一个实际站点为例：eyeglasses.com。显然，如果这个网站注重页面可读性以及用户的可控性，那么浏览该网站的用户便更能因此受益(因为他们应该大都视力不佳)(见图 1-1)。

eyeglass es.com 网站很好地使用了 CSS，设计很精美。和许多其他站点一样，它在页面的<body>元素上使用font-size属性为整页的文字设定了一个以像素为单位的基准大小。

图 1-1 我们以 eyeglasses.com 网站为例来演示设定页面文字大小的常见做法

(本图截取自 2004 年 12 月)

body {

font-size:11px

}

通过在<body>元素上为页面上的文字设定一个基准大小(本例中是 11px)，设计师可以确保在整个页面中(除非在别的对象中被后继的属性值覆盖)的所有文字都将是11个像素那么大。使用像素作为单位的好处在于，不管使用哪种浏览器或者设备来查看页面，文字看起来都几乎一样大。这种一致的，能被事先确定的大小单位正是设计师们所乐意采用的。那些要求页面达到像素级别的完美精确性的人，更是会用像素取代其他一切大小单位。然而，这么做还是有一个小问题。

为什么这样做不是无懈可击的

使用像素来设定文字的大小，能让设计师精确控制各种字体的显示尺寸。但是，目前最流行的 W e b 浏览器( 至少在写作本书时)：W i n - dows平台下的Internet Explorer(IE/Win)的广大用户，会面临一个问题。

我们这里绝非在嘲弄eyeglasses.com网站的设计人员。事实上，这是一个设计得非常好的站点，采用了结构化的XHTML和CSS 来实现——这也是我选它为例的原因之一。在这方面它是值得赞赏的。这里只是选取它作为一个参考范例而已。

W e b 浏览器通常会给用户提供一些方法，让他们可以随意改变页面上文字的大小，以取代设计师原本的设定。这是个很好的功能，对于那些视力较差的用户而言尤为实用！这些用户可以通过浏览器的菜单选择让文字大一号显示( 图 1 -2 ) 。

图 1 - 2 　IE 6 /Win 的“字体大小”菜单可以让用户随意加大或减小页面文字的大小

听上去很不错吧？但问题在于，当以像素为单位设定了文字的大小后，Windows 平台下的 Internet Explorer 的用户便无法再任意地改变这个大小了。因此，虽然使用像素可以让设计师非常精确地控制尺寸，但同时也禁止了IE/Win用户按照他们的意愿调整文字大小。并且令人不满意的是，很多其他浏览器的用户却可以安全地调整字体大小，不管文字大小如何被设定。

对于视力较差的用户，能够随意调整文字大小应该是他们的基本需求，此外，用户可能还想通过这种方法来让页面内容更易于阅读。而作为设计师，我们很自然地想要充分地控制整个页面的显示效果。这里确实产生了矛盾。但是，如果设计师将这种控制性减少一点点，比如在文字大小方面，就能为每个用户实现更好的体验和易用性了。

IE/Win 之所以拒绝用户改变以像素为单位设置大小的文字，也许是因为它的开发人员坚持这样的观点：像素就是像素，一种绝对的不可变更的大小单位，即使用户想要改变它( 本来用户就应该有这个权力) 。但无论怎样，所有其他的浏览器却都在做正确的事情，允许用户定义的控件重写以像素为单位的文本大小。

理想的情况当然是，设计师们可以选择用像素控制文字大小，用户也可以随意调整。但是由于 IE/Win 的这种缺陷，理想无法实现。那么我们只好来探索一种替代办法，最终，我们将采用一种策略，不要求 100%的精确性，但要求获得最好的浏览器可伸缩性。

从技术角度讲，像素其实是一种相对的大小度量单位，它与特定设备的显示或打印的分辨率有关。例如，一个像素在被显示在计算机屏幕上和在被打印到页面上时的大小是不同的。(更多相关信息，请参见 w ww . w3 . or g / T R / RE C - C S S2 /syndata.html #pixel-units)