Google Chrome開發者工具將瀏覽器的默認字體大小顯示爲18像素？

默認字體大小已知爲16像素。我做了一個簡單的頁面並進行了測試。我查看了谷歌瀏覽器中的開發工具，它說18（是的，我刪除了段落元素的邊距和填充）。我跑了下面的JavaScript手動獲取字體大小，看它是否是16px，它是。 這是什麼數字18從？Google Chrome開發者工具將瀏覽器的默認字體大小顯示爲18像素？

var el = document.getElementById('hello'); 
 
var style = window.getComputedStyle(el, null).getPropertyValue('font-size'); 
 
var fontSize = parseFloat(style); 
 
console.log(fontSize);

<p id='hello'>Hello world</p>

來源

2017-02-12 Robert Rocha

的line-height。設置爲line-height: 1;，高度將爲16px。

var el = document.getElementById('hello'); 
 
el.style.lineHeight = '1'; 
 
var style = window.getComputedStyle(el, null).getPropertyValue('font-size'); 
 
var fontSize = parseFloat(style); 
 
console.log(fontSize);

<p id='hello'>Hello world</p>

來源

2017-02-12 02:19:10

感謝。有沒有一種方法使用開發人員工具來獲取16px而無需手動輸入CSS（在這種情況下是行高）還是使用JavaScript？ –

@MichaelColer我的意思是有沒有一種方式來獲得使用開發工具默認的字體大小，而不必在'線height'手動輸入？ –

@RobertRocha如果我正確理解你，沒有。開發工具將始終顯示元素的高度/寬度。爲了得到它，以顯示不同的大小，你必須調整元素 - 在這種情況下，這意味着除去'線height'（或將其設置爲不同的東西或其他）。 –

由Chrome開發工具中選擇的區域包括p元件周圍的line-height（見https://developer.mozilla.org/en/docs/Web/CSS/line-height），以及任何padding/margin。

您可以探索在樣式的空白和邊距窗格：
如果沒有填充或利潤率（如在你的例子），那麼這僅僅是line-height。將其設置爲1以獲得您的預期輸出。

來源

2017-02-12 02:19:17 Toastrackenigma

Google Chrome開發者工具將瀏覽器的默認字體大小顯示爲18像素？

回答

相關問題