2024年4月26日发(作者：)

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做为单位，且显示的字体为宋体，则，8px18px时

font-size(px)=字体实际高度(px)+1px;font-size9px时font-size(px)=字体

实际高度(px);font-size17px时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值。

PS:另外关于line-height的其他知识可以看看mayer的:

本文引用自: