line-height和字体实际高度的计算

最近讨论到了line-height的问题，做了一个实验，分别测试占主流的Firefox、IE6、IE7、IE8下的line-height的算法。

1.第一种情况，字体为宋体，在不设置line-height时，font-size:12px。

Firefox—-字体实际高度为11px，上留白1px，下留白2px，上下所占空间为14px。

IE6—–字体实际高度为11px，上留白0，下留白3px，上下所占空间为14px。

IE7—–字体实际高度为11px，上留白0，下留白1px，上下所占空间为12px。

IE8—–字体实际高度为11px，上留白0，下留白1px，上下所占空间为12px。

2.第二种情况，，字体为宋体，设置font-size:12px，line-height :12px，在IE下给每一行文本都设置了背景色用来突出它的区域。

Firefox—-字体实际高度为11px，上留白0，下留白1px，上下所占空间为12px。

IE6—–字体实际高度为11px，在这个line-height值上，IE6很奇怪，字体向上突出了，下留白1px，上下所占空间为12px。

IE7—–字体实际高度为11px，上留白0，下留白1px，上下所占空间为12px。

IE8—–字体实际高度为11px，上留白0，下留白1px，上下所占空间为12px。

3.第三种情况，，字体为宋体，设置font-size:12px，line-height :14px，在IE下给每一行文本都设置了背景色用来突出它的区域。

Firefox—-字体实际高度为11px，上留白1px，下留白2px，上下所占空间为14px。

IE6—–字体实际高度为11px，在这个line-height值上，上留白为0，下留白3px，上下所占空间为14px。

IE7—–字体实际高度为11px，上留白1px，下留白2px，上下所占空间为14px。

IE8—–字体实际高度为11px，上留白1px，下留白2px，上下所占空间为14px。

4.第四种情况，，字体为宋体，设置font-size:12px，line-height :19px，在IE下给每一行文本都设置了背景色用来突出它的区域。

Firefox—-字体实际高度为11px，上留白3px，下留白5px，上下所占空间为19px。

IE6—–字体实际高度为11px，在这个line-height值上，上留白为3px，下留白5px，上下所占空间为19px。

IE7—–字体实际高度为11px，上留白4px，下留白4px，上下所占空间为19px。

IE8—–字体实际高度为11px，上留白3px，下留白5px，上下所占空间为19px。

5.第五种情况，，字体为宋体，设置font-size:13px，line-height:20px，在IE下给每一行文本都设置了背景色用来突出它的区域。

Firefox—-字体实际高度为12px，上留白3px，下留白5px，上下所占空间为20px。

IE6—–字体实际高度为12px，在这个line-height值上，上留白为3px，下留白5px，上下所占空间为20px。

IE7—–字体实际高度为12px，上留白4px，下留白4px，上下所占空间为20px。

IE8—–字体实际高度为12px，上留白3px，下留白5px，上下所占空间为20px。

6.第六种情况，字体为宋体，设置font-size:13px， line-height:21px。

Firefox—-字体实际高度为12px，上留白4px，下留白5px，上下所占空间为21px。

IE6—–字体实际高度为12px，上留白3px，下留白6px，上下所占空间为21px。

IE7—–字体实际高度为12px，上留白4px，下留白5px，上下所占空间为21px。

IE8—–字体实际高度为12px，上留白4px，下留白5px，上下所占空间为21px。

7.第七种情况，字体为tahoma，设置line-height:12px; font-size:20px。

在这种字体下字体的实际高度为12px，上留白为2px，下留白为4px，上下所占空间为18px。

总于到[貌似不完全，不能一一测试所有字体和所有浏览器]总结了：

1.宋体下如果用px做为单位，且显示的字体为宋体，则，8px<font-size<18px时font-size(px) = 字体实际高度(px)+1px；font-size<9px时font-size(px) = 字体实际高度(px)；font-size>17px时font-size(px) = 字体实际高度(px)+2px。

2.宋体下如果用px做为单位，且显示的字体为宋体，line-height = 字体实际高度(px)+上留白(px)+下留白(px)

2.1  如果font-size为偶数，而line-height为偶数：

Firefox下: 下留白(px)-1px = 上留白(px)

IE6下: 下留白(px)-3px = 上留白(px)

IE7下: 下留白(px)-1px = 上留白(px)

IE8下: 下留白(px)-1px = 上留白(px)

2.2  如果font-size为偶数，而line-height为奇数：

Firefox下: 下留白(px)-2px = 上留白(px)

IE6下: 下留白(px)-2px = 上留白(px)

IE7下: 下留白(px) = 上留白(px)

IE8下: 下留白(px)-2px = 上留白(px)

2.3  如果font-size为奇数，而line-height为偶数：

Firefox下: 下留白(px)-2px = 上留白(px)

IE6下: 下留白(px)-2px = 上留白(px)

IE7下: 下留白(px) = 上留白(px)

IE8下: 下留白(px)-2px = 上留白(px)

2.4  如果font-size为奇数，而line-height为奇数：

Firefox下: 下留白(px)-1px = 上留白(px)

IE6下: 下留白(px)-3px = 上留白(px)

IE7下: 下留白(px )-1px(或2px，因IE7下，如果font-size小于12，字体实际高度跟font-size是相同的)= 上留白(px)

IE8下: 下留白(px)-1px = 上留白(px)

3.经过测试如果单位为px，英文的衬线字体arial实际高度为font-size值 – 1px，而非衬线字体tahoma的字体实际高度就为font-size值。

 来源：http://www.cnscorpio.cn/2009/06/line-height-2/

转载于:https://www.cnblogs.com/cztom/archive/2009/06/15/1503759.html