关于CSS中字号控制的兼容性研究

过去一段时间人们似乎又非常热衷于探讨网络文档的印刷格式，涌现了很多与之相关的技术与理论资料，其中相当重要的一个领域就是关于印刷中字号和行高的精确控制。但问题是：网络是一个相当特殊的媒介，浏览者一设计者一样拥有几乎同等的控制权限，以文本为例，虽然其呈现方式很大程度上取决于设计者的意愿，但还是会在不同的浏览器或平台上存在或多或少的差异。

在本文中，我们将探讨在设计者意愿与用户需求之间，如何让文本的呈现方式取得一种平衡。为了达到这个目的，我们需要对传统的处理方法进行研究，反思其中的实践经验和不足。我在Owen Briggs的pioneering work基础上，总结分析了六大条目，配之以大约160张截图，希望能增进大家的理解和实践。

测试样本

用于测试的对象是两列Arial字体的文本，左侧我们视之为主内容，右侧为边栏。我们测试的平台和浏览器主要是MAC下的Safari 2, Firefox 2，Opera 9.5，以及开启ClearType效果的Windows XP下的IE6和IE7.每种平台或浏览器都以默认设置为运行环境，我们的测试主要是看看各个浏览器如何渲染其中的小、中、大、特大文本，以及在90%, 100%, 110%, 以及120%的缩放比例下具体效果如何。

首先很有必要来验证一下用于测试的浏览器在初始的情况下有着一致的标准，在基础例子中大家可以看到，各款浏览器中默认的文本字号都是16px，若对字号进行改变，文本的缩放也遵循着一致的标准。

PX单位字号文本 – iteration 1

虽然我们可以直接从基础示例中默认的字号着手讲解，但对于大多数人来说，16px的正文字号显得有点太大了。所以在我们的例子中，我们把正文字号重置为14px，侧边栏文本则是12px，CSS规则如下：

在结果示例中可以看到，在Safari 和 Firefox中，文本会随着larger、largest的声明缩放其字号，但IE6和7则无动于衷。

EM单位字号文本 – iteration 2

虽然现今浏览器的市场份额在不断变化，但毋庸置疑的是很多的用户都还在使用IE6，所以px字号设置会将这些用户拒之于文本大小调整的门外。那么接下来我们尝试一下em字号，事实上em也是W3C推荐的印刷单位。如果要在默认的设置下利用em达到等同于14px和12px字号的文本大小，需要进行如下CSS声明：

在结果示例中可以看到以em为字号单位的文本在各款浏览器中都能进行文本缩放，但是在IE6和7中缩放的幅度似乎有点夸张了。

BODY中的百分比字号– iteration 3

对于在第二个测试中IE6和7所出现的问题，我们可以通过设置body标签的百分比字号来解决，当然对于其它元素的文本还是沿用em单位字号：

示例中可以看到，我们已经基本达成了文本缩放一致的目的。

用PX设置行高 – iteration 4

最近一些关于Web文档打印的文章，如Setting Type on the Web to a Baseline Grid，强调了一个良好的印刷格式在垂直方向上也应该体现栅格特质，其中最重要的因素就是行高，它应该不受字号设置的影响。

举个例子，一种比较恰当的行高设置是18px，我们可以在body标签中进行定义：

结果示例中可以看到，无论是主体还是侧边，所有的文本都继承了18px的行高。当然这是在为行高值定义了单位的情况下。如果我们采用比例因子之类省略单位的行高设置，行高就会随着字号的变化而变化，当然某些情况下这也可能是我们需要的结果。

不幸的是在IE6和7下18px的行高不会随文本的缩放而变化，这就意味这文本足够大的时候可能会产生重叠的现象。

用EM设置行高 – iteration 5

既然px不适合，我们接着来尝试一下em单位，设定如下CSS规则：

所得到的结果在各方面都正如我们期待的一样，近乎完美。

Safari 中等距字体的问题 – iteration 6

细心的人可能会发现，在Safari浏览器下主体文本中等距字体文本在渲染上存在一些细微的差别：当字号以px为单位时，等距文本的宽度与其它文本没有很大的区别，但是当字号以em为单位时，等距文本的宽度就要小多了。这个问题的根源在于Safari缺省设置中，普通字体的字号为16px，而等距字体的字号则是13px。

英文有那么多字体, 但都隶属于serif, sans-serif和monospace三种字组. 由于英文本身的特点, 不同于方块字(汉字), 英文字母的宽度是不相等的, 这就给出版业如报纸的排版工作增加了难度, 于是发明了等距字体(monospace).

也许有些人会觉得这个问题无关紧要，但大部分人不会放弃对这些细节的追求。那么下面就是一个可行的解决方案，注意其中的[if !IE]语法，它表示IE6和7将忽略表示其后的规则：

上面的规则把px字号应用到了除IE6和7的其它浏览器上，结果示例中可以看到现在所有的浏览器下行高与字号之间都有了很好的缩放协调，包括Safari中的等距文本。

对于这种类似于Hack的方法存在很多争议，但个人认为在这里运用它没有什么不妥当，毕竟我们只是利用浏览器特性来矫正其元素渲染的处理方式而已。另外本例中的CSS都是内联式的，最好的方式当然是外联样式。