对于衬线字符而言font-size确实是它的高度，但在非衬线字体中font-size只是一个字号而已。而且现代浏览器支持在设置font-family时使用多个不同的字体，这些混合字体的就需要单独计算字符高度。因此CSS的实现过程中需要一个内部属性来保存字符高度。

字符高度比行高要健壮！在BFC(Block Formatting Context)中如果行高小于字符高度字符会溢出而不是缩小。如果行高大于字符高度字符会在行的中央，这就是为什么我们经常会把容器的高度和行高设置成一样的来做垂直居中。

那么在对font-family设置多个字体时字符高度是如何计算的呢？由于规范文档中没有定义，所以存在浏览器差异。Chrome和IE中使用第一个设置的字体作为字符高度，Firefox中使用从第一个字体到匹配字体中的最大字符高度作为这个复合字体的字符高度。

由于我们平时对字符都使用默认的基线对其，所以一般不会察觉到字符高度带来的问题。在使用其它对其方式时就能看出问题，比如下面的例子使用了float(它自带顶部对其)。

运行<style> .s {padding:20px;display:inline-block;border:1px solid #CCC;} .s span {float:left;} .s1 {font-family:微软雅黑;} .s2 {font-family:Verdana,微软雅黑;} </style> <span class="s"> <span class="s1">啊</span> <span class="s2">啊</span> </span>

在Chrome和IE下两个span中的字符明显无法对其，因为前者使用微软雅黑的字符高度，后者使用了Verdana的字符高度。而Firefox看不出什么差异，这是因为它的计算方式不同，微软雅黑比Verdana高，所以在Firefox中Verdana的高度被忽略了，因此看上去没有造成影响。但如果把上面的Verdana换成一个比微软雅黑的行高还高的英文字体就会遇上同样的问题。

所以不要因为文字只有中文就不加英文字体，font-family这个属性设置的不仅仅是字体那么简单！