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

Question

已知默认字体大小为 16 像素。我制作了一个简单的页面并对其进行了测试。我查看了 Google Chrome 中的开发人员工具，它显示为 18（是的，我删除了段落元素的边距和填充）。 我运行以下 JavaScript 来手动获取字体大小，看看它是否为 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>

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>

Answer 2

Chrome 开发工具选择的区域包括

line-height

（请参阅 https://developer.mozilla.org/en/docs/Web/CSS/line-height）以及任何

padding

/

margin

围绕

p

元素。

• 您可以在样式窗格中探索内边距和边距：

  

• 如果没有填充或边距（如您的示例中所示），那么这只是

  line-height

  。将其设置为

  1

  即可获得预期的输出。

Answer 3

我遇到了这个问题，解决方案如下：

1. 打开 Google Chrome 设置
2. 搜索“字体大小”。
3. 选择“中（推荐）”。
4. 在下面选择自定义字体。
5. 将滑块滑动至 16（默认大小）

瞧

现在如果你去 chrome DEV 工具 -> 计算中检查它，你可以在计算中看到 16px。