Firefox 和 Chrome 中的不同字體高度

Question

我想使用 jQuery 測量 html 元素的字體高度。

這是一個小提琴

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

字體的高度不僅用 font-size 來衡量，還用 font-size 和 line-height 以及 padding 值來衡量：

因此，不同的瀏覽器具有不同的默認值，例如Firefox 和 chrome 中的 line-height 1px 不同，因此它們可能會有所不同。

您可以通過明確定義它們來計算它們。