最近评论
正在载入评论列表...
1.3 无懈可击的方法
我将和大家分享一种策略，它在我自己已经完成的好几个项目中已被证明是成功的，它结合使用了关键字和百分比值。使用关键字作为 font-size 属性的值，解决 了先前我们在 eyeglasses.com 的例子(以及数百万的其他网站)中所暴露出来的问题。和 使用像素不同，现在无论用户使用哪种浏览器或设备，都将能够改变页面文字的大小 了。下面就来看看这是如何实现的。
1.3.1 关键字
前面已经提到过，使用关键字时我们有 7 个值可用：xx-small、x-small、 small、medium、large、x-large、xx-large。这里给出它是如何声明的，例 如设定<body>对象中的文字大小：
body {
font-size: small;
}
关键字设定的文字大小与浏览器当前的默认设置有关。换句话说，如果用户调整 了浏览器的设置，使其基准文字大小比默认值更大或更小些，则该关键字的显示结果 就会相对于这个新默认值成比例变化。无论基准大小是多少，各个关键字之间的变化 比例总是恒定的。
例如，图 1-3 展示了各个关键字值在浏览器的默认文字大小的不同设置下的变化情 况。我这里是用 Sa fa r i 浏览器做的演示。
图 1 - 3 Safa ri 中各个关键字显示结果变化的比较。右图中，基准文字大小被设大了一些
您会注意到，根据基准文字大小的不同，small 值的实际显示大小会不一样，然而 small 值和其前后相邻的值的显示大小之间总是保持相同的比例。
1.3.2 放弃像素级别的精确度
每一个使用关键字(或者其他任何除px之外的font-size属性单位)的设计师面临的最 大障碍是：由于浏览器，操作系统，以及软件设置的不同，同一个关键字的实际显 示大小将会有细微的区别。
例如，我们刚刚展示过的，关键字值 small 的实际显示大小，即使在基准文字大 小都设置为默认的中等字号的情况下，也会因为浏览器和/ 或所用操作系统的不同而有所差 异 。
如果“像素的大小要绝对一致”被认为是 Web 世界的一个法则，那么关键字则更 像是一个指导方针，给出一些关于浏览器或设备应该按照怎样的大小显示文字的建议。 如果您愿意在精确程度上做一些让步，而支持更好的灵活性，那么您的作品(以及您的 用户) 都会受益。
1.3.3 两个需要克服的障碍
稍后，我将给出一些方法，用以解决使用关键字时因浏览器的不同而出现的显示 差异。不过首先，我得提一下 Netscape 4.x 和 IE5/Win 在处理这些差异时存在的两个主 要问题 。
1. Netscape 4.x
很遗憾，即使是在默认的中等字号的设置下，Netscape 4 显示的文字仍然会偏小， 甚至小到难以看清楚的程度。由于这个问题很严重，因此在针对 Netscape 4 使用 CSS 设置文字大小时，最好不要使用关键字。(更多信息，请参见 www.alistapart.com/ articles /sizematters)然而，我们也不必太担心这个问题，因为对于这样古老的 浏览器，我们还不如干脆屏蔽掉所有的 CSS 样式( 本书中的所有范例都会如此) 。好， 克服了第一个障碍。
2. IE5 Windows
第二个障碍要更棘手些，因为在本书写作时，还有相当多的用户仍然在使用 IE5/ Win，针对这种浏览器，继续完全屏蔽 CSS 样式未免显得不够成熟。IE5/Win 的这个 问题恐怕是它的开发者犯的一个明显错误。
和其他良好支持 Web 标准的浏览器相比，IE5 中关键字的显示结果总是要整整大一 号(其中的原因恐怕只有微软公司才能解释了)。例如，在浏览器的文字大小设置为默认
值时，我们声明如下样式：
body {
font-size: small;
}
在 IE5 Win 文本中，文字却会显示为 medium 的大小。这违背了我们的初衷。图1-4 显示了在同样使用 small 时，IE5 和 IE6 中实际显示效果的差别。
图 1 -4 比较这两幅图，IE5 /Win 在显示设定为关键字值 small 的文字时，比 IE6(以及其他同级别的浏览器)要大了一号
要避免这个问题，以及让所有的浏览器和设备在访问同一个页面时能显示差不多相同的文字大小，我们需要利用 CSS hack，以便我们可以为 IE5/Win 和其他浏览器分别设定规则。于是，相比于其他浏览器，我们可以专门为 IE5/Win 指定一个小一号的关 键字值。这样就能保持页面显示效果的一致性了。
3. 针对 IE5/Win 的 hack
为了给IE5/Win指定一个比我们原本意向中再小一号的font-size，我们使用著名 的Box Model Hack(框模型Hack)，它由Tantek Celik(www.tantek.com/CSS/ Examples/ boxmodelhack.html)发明，可以欺骗 IE5/Win，使它以为 CSS 声明已经结束。得益 于这个“神秘巫术”，我们能够首先为 IE5 /W in 声明一个小一些的值，然后，对于兼 容的浏览器，用我们原本意向中的文字大小值覆盖掉这个声明。
假设我们的意向大小值是 small，那么给<body>中的内容设定的一些必要的 CSS
规则会像下面这样：
body {
font-size: x-small; /* for IE5/Win */
voice-family: "\"}\"";
voice-family: inherit;
font-size: small; /* for compliant browsers */
}
html>body { /* be nice to Opera */
font-size: small;
}
您会注意到，我们打算设定一个基准 font-size，使用关键字值 small，我们 还针对IE5/Win 声明了小一号的值，然后用下列代码使IE5/Win 以为CSS 声明已经结束：
voice-family: "\"}\"";
只有 IE5/Win 能识别出这个结束大括号，于是它会认为 CSS 规则的声明已经结束。 对于其他所有兼容浏览器，我们在后面用 small 覆盖了 x-small。于是，现在我们 就得到了一个相对一致的基准文字大小。
在上例中还会注意到第二个声明，一个完全一样的指定 font-size: small的规 则。在注释中，我称这个规则为“对 O p er a 友好”的规则，因为它能防止 O p er a 浏览器(以及某些其他浏览器)潜在地忽略掉 hack 代码之后的规则。如果使用了 Box ModelHack，这句声明就应该也要用上；它本质上确保了所有的兼容浏览器都能完整读取样 式表中的下一条声明。
1.3.4 简化的 Box Model Hack
简化的Box Model Hack(SBMH)由Edwardson Tan 发明，用更少一些的，以及语法上更容易 理解的代码实现了相同的结果(能为IE5/Win和所 有其他浏览器指定不同的值) 。
这次我们使用 SBMH，那么我们前面的例 子就会是这样：
body {
font-size: small;
}
* html body {
font-size: x-small; /* for IE5/Win */
f\ont-size: small; /* for other IE versions */
}
首先给<body>对象设定正常的声明，使用我们意向中的 small 值。然后，由于IE 中的一个 bug，可以通过使用 *html 选择器来提供专门用于 IE 浏览器的声明。IE5/Win忽略 font-size 属性中的反斜杠，因此可以放心地为它设置 x-small 值，然后，针对其他版本的 IE，再用 small 值将 x-small 值覆盖掉。
要了解关于使用关键字和上述技巧性补救办法的更多信息，请参 见 Todd Fahrner 发表在 A List Apart 杂志上的一篇详细的文章( w w w . alistapart.com/articles /sizematters/)。
我们实现了和使用起初的 Box Model Hack 一样的结果，但是这个版本的语法相对 简化，对于刚刚开始学习这个方法的人来说也许更容易掌握。(关于 SBMH 的更多信息， 请参见www.info.com.ph/~etan/w3pantheon/style/modifiedsbmh.html)。 您可能会觉得使用 Box Model Hack 有点麻烦，花了很多功夫却只为纠正一个文本显示大小的问题。但是，如果确实想要获得页面表现上的一致性，就不得不付出代价。好在有一些方法，可以策略性地将所有的 CSS hack 以及技巧性补救办法集合起来， 把它们和简洁的样式表分离开—— 我们在第 9 章中将会看到其中的某些方法。
