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

用PX设置行高 – iteration 4

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

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

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

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

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

用EM设置行高 – iteration 5

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

body { 
font-size:100％; 
line-height:1.125em;  /* 16×1.125=18 */ 
} 
  
.bodytext p  { 
font-size:0.875em; 
} 
  
.sidenote  { 
font-size:0.75em; 
}

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

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

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

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

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

<style type="text/css"> 
body { 
    font-size:100％; 
    line-height:1.125em; 
} 
  
.bodytext p { 
    font-size:0.875em; 
} 
  
.sidenote { 
    font-size:0.75em; 
} 
</style> 
  
<!--[if !IE]>--> 
  
<style type="text/css"> 
body { 
    font-size:16px; 
} 
</style> 
  
<!--<[endif]-->

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

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