惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

H
Help Net Security
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
博客园 - 【当耐特】
Microsoft Azure Blog
Microsoft Azure Blog
Google DeepMind News
Google DeepMind News
Apple Machine Learning Research
Apple Machine Learning Research
有赞技术团队
有赞技术团队
Y
Y Combinator Blog
H
Hackread – Cybersecurity News, Data Breaches, AI and More
爱范儿
爱范儿
L
LangChain Blog
IT之家
IT之家
酷 壳 – CoolShell
酷 壳 – CoolShell
MongoDB | Blog
MongoDB | Blog
Hugging Face - Blog
Hugging Face - Blog
G
Google Developers Blog
T
Tailwind CSS Blog
Engineering at Meta
Engineering at Meta
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
宝玉的分享
宝玉的分享
博客园 - 三生石上(FineUI控件)
D
DataBreaches.Net
Recent Announcements
Recent Announcements
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More

博客园 - 亦续缘

[CSS]textarea设置下划线格式 赠送google wave邀请函 int[] 和 string[] 互换 - 亦续缘 将字符串转换成List<T> - 亦续缘 - 博客园 Web可用性设计的247条指导方针 IIS7用进程池的PID查找占用CPU的站点 UNICODE与汉字编码互转 CSS中属性的书写顺序 TinyMCE在线编辑器用JavaScript取值的问题 给SQL数据库表和字段添加描述信息 javascript 正确截取单字节和双字节混和字符串的方法 - 亦续缘 - 博客园 DataTable转换成JSON字符串的函数 异常详细信息: 不能通过已删除的行访问该行的信息 Web开发利器之IEWebDeveloperV2--有注册码 HttpUtility.ParseQueryString直接从字符串URL中提取参数 JavaScript创建命名空间 JavaScript ColorDropDownList - 亦续缘 - 博客园 asp.net Forms验证跨域页面不能访问的问题 语音验证码
line-height和字体实际高度的计算
亦续缘 · 2009-06-15 · via 博客园 - 亦续缘

最近讨论到了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/