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

推荐订阅源

T
Tenable Blog
H
Heimdal Security Blog
K
Kaspersky official blog
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
S
Schneier on Security
G
GRAHAM CLULEY
U
Unit 42
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
C
CERT Recently Published Vulnerability Notes
Google DeepMind News
Google DeepMind News
罗磊的独立博客
Stack Overflow Blog
Stack Overflow Blog
阮一峰的网络日志
阮一峰的网络日志
Simon Willison's Weblog
Simon Willison's Weblog
C
Cisco Blogs
Cyberwarzone
Cyberwarzone
T
The Exploit Database - CXSecurity.com
Project Zero
Project Zero
Security Archives - TechRepublic
Security Archives - TechRepublic
www.infosecurity-magazine.com
www.infosecurity-magazine.com
博客园 - 司徒正美
Exploit-DB.com RSS Feed
Exploit-DB.com RSS Feed
V
Visual Studio Blog
博客园 - Franky
Engineering at Meta
Engineering at Meta
WordPress大学
WordPress大学
Jina AI
Jina AI
P
Proofpoint News Feed
P
Proofpoint News Feed
有赞技术团队
有赞技术团队
L
LINUX DO - 最新话题
宝玉的分享
宝玉的分享
N
News and Events Feed by Topic
cs.CV updates on arXiv.org
cs.CV updates on arXiv.org
博客园 - 聂微东
T
The Blog of Author Tim Ferriss
Spread Privacy
Spread Privacy
Application and Cybersecurity Blog
Application and Cybersecurity Blog
IT之家
IT之家
S
Security Affairs
博客园 - 叶小钗
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
小众软件
小众软件
N
News | PayPal Newsroom
Cloudbric
Cloudbric
AWS News Blog
AWS News Blog
W
WeLiveSecurity
The Last Watchdog
The Last Watchdog
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
NISL@THU
NISL@THU

博客园 - 亦续缘

[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/