谷歌Chrome开发者工具显示浏览器默认字体大小为18像素？

Question

默认字体大小为16像素。我创建了一个简单的页面并进行了测试。我查看了Google Chrome中的开发者工具，它显示字体大小为18（是的，我已经将段落元素的边距和内边距去掉了）。我运行以下JavaScript手动获取字体大小以查看是否为16px，结果是16px。那么这个数字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>

- Robert

Answer 1

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>

- Michael Coker

---

谢谢。在开发者工具中是否有一种方法可以获取16px，而不需要手动输入CSS（在这种情况下是行高）或使用JavaScript？ - Robert

@MichaelColer 我的意思是是否有一种方法可以使用开发者工具获取默认字体大小，而无需手动输入 line-height？ - Robert

@RobertRocha 如果我理解正确的话，不是这样的。开发工具将始终显示元素的高度/宽度。要使其显示不同的大小，您必须调整元素的大小 - 在这种情况下，这意味着删除 line-height（或将其设置为其他内容）。 - Michael Coker

Answer 2

Chrome Dev Tools选定的区域包括line-height（参见https://developer.mozilla.org/en/docs/Web/CSS/line-height）以及p元素周围的任何padding/margin。

• 您可以在样式面板中探索填充和边距：

  

• 如果没有填充或边距（就像您的示例一样），那么这只是line-height。将其设置为1即可获得预期的输出。

- Toastrackenigma