1.6　结合使用关键字和百分比值

要更好地利用将关键字和百分比值结合使用的优势，必需牢记一些规则。下面的内容，对于该如何正确地调整百分比值应该有所帮助，我们还要提出一个针对嵌套使用百分比的警告。

1.6.1　设定一个中间的关键字基准值

在设定基准文字大小时，有一个有用的诀窍，即用一个包围所有对象的<div>来帮助调整关键字值。多数情况下，在建立基于 CSS 的布局时，我们都会出于各种和设计相关的理由，使用一个<div>(参见第 8 章)在基准关键字之上设定一个能影响整个页面的百分比值。

例如，现在准备处理如下 H T M L 代码：

<body>

<h1>This is a Title</h1>

<p>This is body text at default base size.</p>

</div>

</body>

如同本章前面完成的那些工作一样，我们可以设置一个基准关键字值，以及一个有较大百分比值的<h1>对象：

body {

font-size: small;

}

h1 {

font-size: 150%;

}

但是如果我们感觉small值相对于我们的喜好还偏大了一点(在浏览器的默认设置情况下查看时)，我们可以通过给 #container 这个包围了页面上所有文字的对象设置一个百分比，来让这个基准值实际上变小一些：

body {

font-size: small;

}

h1 {

font-size: 150%;

}

#container {

font-size: 95%;

}

如图 1 - 9 所示，文字从默认大小减下来了一些，同样也影响到了大标题文字。

图 1-9　这里是使用基准关键字值 small，和将容器的文字大小设定为 95% 后的显示效果的比较

图 1-9 中，第一张图显示的是添加了规则使得 #container 的 font-size 被渲染为 95% 时的效果，第二张图则是页面在只使用关键字值 small 时的效果。两者的差别其实很小。

当想用到一个介于两个关键字值之间的文字大小时，这便是一种很有用的方法，能够更佳精确地设定大小值。使用这个包围了整个页面的<div>，可以在关键字的基础上增大或者减小，实现自定义的基准文字大小。

我们最好是别追究太细节的东西，然而，不同的浏览器 - 系统平台的组合之间总是可能存在微小的显示差别。但重要的在于，用户仍然可以通过浏览器内置的功能控制

文字大小。

1.6.2　谨慎使用嵌套百分比值

在嵌套使用百分比值时您得谨慎些，在上面的例子中，我们为整个页面设定了一个关键字值 small，然后通过使用 container <div>来将这个值减小为 small 的95%。此后，当再为 #container 里面的对象设定百分比值时，有些事情可能会令人糊涂。

例如，前面我们声明了所有的<h1>对象应该被设定为 150%。但因为<h1>对象在文档树中要低一些—— 它被包含在 #container 中，因此在页面层级中位于 #con- tainer 之下—— 所以我们真正得到的并不是初始值 small 的 150% 大小，而是 small 的95 % 大小的 150 %。关于页面文档树中对象的嵌套如何影响百分比值，可见图 1- 10 。

图 1 - 1 0 　这是当对象嵌套时，百分比如何计算的示意图

困惑了？如果把 small 换成一个数值可能会帮助您理解。假设给<body>设定的文字大小基准值等于10(而不再是small)，那么#container以内的任何东西都等于 9.5(即 10 的 95%)。大标题<h1>在 #container 的里面，我们指定了一个 150% 的 font-size 给它。我们本来的基准值 10 的 150% 是 15，但因为<h1>的父对象是 #container，所以计算过程就是 9.5 的 150% 等于 14.25。当选择嵌套的层级越深时，百分比的计算也愈加复杂。现在抛开令人头晕的算术，我们这里想强调的是，当声明新的百分比值时，要先看看是不是已经设定了任何父对象的百分比。就我个人而言，我在构建页面的时候嵌套很少超过两层，但是了解了嵌套层级对百分比值的影响，可以在面对文字大小并不是如您所想的结果时，不至于太困惑。

当嵌套小于100%的百分比时的一个额外警告：一旦用户通过改变浏览器设置进一步减小文字的话，可能会导致页面文字小到难以辨认。换句话说，如果在设计页面时考虑的是默认浏览环境，并使用了一个在浏览器默认设置下文字非常小不过仍能看清的百分比值，那么当用户的浏览器所设置的文字大小为比默认值小的时候，这个百分比值下的文字就可能没法看清楚了。记住，要在各种浏览器和文字大小的场景下做测试，不管设置什么样的关键字－百分比组合，都要确保文字总是可读的。无论用什么方法设定文字大小，这都是一个值得一看的是 Owen Briggs 整理的一份全面翔实的测试清单，包括了各种浏览器，系统平台以及文字大小设定方法(www.thenoodleincident .com/t utoria ls/ box_lesson /font/method.html)。Owen 做了 264 张屏幕截图来重现各种测试场景，并列出了结果比较表(图 1-11)。

图 1 -1 1 　O wen Briggs 对文本大小的测试，包含了 2 64 张屏幕截图涵盖了几乎每种可能的组合，是一份很有价值的资源

1.6.3　百分比值的一致性试验

使用百分比值之前先试验一下，可以保证得到在各种浏览器和平台之间更加一致的文字大小。假设用户在浏览器的默认文字大小设置下查看页面(假设他们不会变更这个设置) ，那么在赋予百分比值时先进行试验是有很用的—— 尤其对于那些较小的值。如果使用前面提到过的note类，则可以比较将这个类的font-size设定为85%和90% 的两种情况。某些浏览器只能支持百分数是 10 的幂(70，80，90 等)的情况，反之某些则能更精确地支持到 5 结尾的百分数( 7 5 ，8 5 ，9 5 等) 。

例如，比较图 1-12 和图 1-13，左边是 Safa ri，右边是 IE6/ Win。在 IE6/ Win 中，85%(上)和 90%(下)看起来并没有明显的不同，但是在 Safari 中可以看到这两个值之间的小幅变化。本例中，我倾向于选择用 90% ，因为在这个大小下，这两个流行的浏览器的显示效果最接近。