不同浏览器与不同字体,默认 line-height 的表现差异

今天在计算文字填充元素高度遇到一个有意思的东西,所以分享出来,首先有如下代码片段:

本以为li的高度会是 32px ,结果在 Firefox 中的高度却是 35px 。再仔细一看,原本以为 12px 的字体高度,结果却是 15px:

firefox-default
Firefox 默认行高 15px

这是什么情况?难度是浏览器兼容性问题?再看看 Chrome 与 Edge 的:

chrome-default
Chrome 默认行高 14px
edge-default
Edge 默认行高 13.8px

Chrome 的文字高度是 14px, 而 Edge 的 13.8px, 真是各不相同,但就是没有一个是 12px。

firefox-line-height
设置 line-height 后的文字高度

让我们继续探索原因,这个时候,最有可能的是line-height属性的问题,为body添加样式line-height:12px,结果正常,看来文字所占高度是由line-height决定的:

但是,我们的探索可不会就此止步,我们会好奇,默认情况下line-height的值是由什么决定的?让我们获取各个浏览器的中li的值看看:。

结果:

fiefox-inline-height-value
获取元素内联样式

又是什么情况?查阅 MDN文档,如此解释:HTMLElement.style 属性返回一个 CSSStyleDeclaration 对象,表示元素的 内联style 属性(attribute),但忽略任何样式表应用的属性。

不过,我们还有最后一招,getComputedStyle(),MDN解释为:得出所有在应用有效的样式和分解任何可能会包含值的基础计算后的元素的CSS属性值。正是我想要的:

在 Firefox 得到的结果:

fiefox-inline-height-value-true
Firefox 获取元素的计算样式

再看看 Chrome 与 Edge 中的情况:

chrome-inline-height-value
Chrome 获取元素的计算样式
edge-inline-height-value
Edge 获取元素的计算样式

Firefox是“15px”,Chrome 与 Edge 是“normal”,哪个才是标准的值呢?查看 MDN 的解释:line-height,可能的值如下:

normal
取决于用户代理。桌面浏览器(包括火狐浏览器)使用默认值,约为1.2,这取决于元素的 font-family。
<number>
所用的值是无单位数值<number>乘以元素的 font size。计算出来的值与使用数值指定的一样。大多数情况下,使用这种方法设置line-height是首选方法,在继承情况下不会有异常的值。
<length>
指定<length>用于计算 line box 的高度。
<percentage>
与元素自身的字体大小有关。计算出的值是给定的百分比值乘以元素计算出的字体大小。

其中提到,默认值既取决于浏览器,又取决于font-family属性,浏览器间的差异之前已经看到了。我选取了“Console”,“ 微软雅黑”以及“Source Code Pro”三种字体。三种字体在 Chrome 中的不同表现如图:

chrome-console
”Console“字体在 Chrome 中的默认行高
chrome-yahei
”微软雅黑“字体在 Chrome 中的默认行高
chrome-source-code-pro
”Source Code Pro“字体在 Chrome 中的默认行高

在 Chrome 中,三种字体的默认行高分别为:14px, 17px, 15px,到此对 line-height 的探索暂靠一段落,以后说不定还会遇到更有意思的事情呢?

发表评论