关于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规则如下：

.bodytext p { 
font-size:14px; 
} 
  
.sidenote { 
font-size:12px; 
}

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

EM单位字号文本 – iteration 2

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

.bodytext p { 
font-size:0.875em; /* 16x.875=14  */ 
} 
  
.sidenote { 
font-size:0.75em; /* 16x0.75=12  */ 
}

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

BODY中的百分比字号– iteration 3

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

body { 
font-size:100％; 
} 
  
.bodytext p  { 
font-size:0.875em; 
} 
  
.sidenote  { 
font-size:0.75em; 
}

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