关于CSS中字号控制的兼容性研究[译]（3）

用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都是内联式的，最好的方式当然是外联样式。

英语原文地址：How to Size Text in CSS