javascript - Firefox 和 Chrome 中的字体高度不同

Question

我想使用 jQuery 测量 html 元素的字体高度。

Here is a fiddle

//HTML
<h1 id="fonty">Size of font in pixels?</h1>

//CSS
#fonty {
    font-size: 8px;
    font-family: Arial;
}

//Javascript
var height = $("#fonty").height();
console.log(height);

该方法工作正常，但我在 Chrome 和 Firefox 中得到不同的结果。有没有办法在所有浏览器中获得正确/相同的字体大小。

Answer 1

字体的高度不仅通过字体大小来衡量，还通过字体大小、行高和填充值来衡量:

因此，不同的浏览器有不同的默认值，例如 line-height 1px different in firefox and chrome所以它们可能会有所不同。

您可以通过显式定义它们来计算它们。