zoukankan      html  css  js  c++  java
  • lineheight和字体实际高度的计算

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

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

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

    f121

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

    ie6-f12

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

    ie7-f12

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

    ie8-f12

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

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

    f12-lh-12

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

    ie6-f12-lh-12

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

    ie7-f12-lh-12

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

    ie8-f12-lh-12

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

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

    f12-lh-14

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

    ie6-f12-lh-14

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

    ie7-f12-lh-14

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

    ie8-f12-lh-14

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

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

    f12-lh-19

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

    ie6-f12-lh-19

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

    ie7-f12-lh-19

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

    ie8-f12-lh-19

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

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

    f13-lh-20

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

    ie6-f13-lh-20

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

    ie7-f13-lh-20

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

    ie8-f13-lh-20

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

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

    f13-lh-21

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

    ie6-f13-lh-21

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

    ie7-f13-lh-21

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

    ie8-f13-lh-21

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

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

    tahoma

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

    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/

  • 相关阅读:
    SQL 中不同类型的表连接
    分享一些不错的sql语句
    SQL Server 日期和时间函数
    Delete,Update与LEFT Join
    Excel 相对引用与绝对引用
    SQL Update 巧用
    Delphi 多步操作产生错误,请检查每一步的状态值
    003-mysql查询表的数据大小、索引大小
    002-导出表结构、数据字典、说明文档
    008-运维管理链码
  • 原文地址:https://www.cnblogs.com/cztom/p/1503759.html
Copyright © 2011-2022 走看看