javascript - 为什么渲染像素与真实像素不同？

Question

在我的 HTML 中我有一个 <div> (称之为面板)具有包含一些文本的固定宽度；该文本设置为 font-size: 25px; line-height: 25px;在随附的 CSS 中。碰巧文本以 36 行结尾。

鉴于所有边距、填充和边框均为零，您期望面板的高度为 36 * 25px = 900px ，这实际上就是我在 Firefox 中使用 DOM 的 getBoundingClientRect() 找到的内容方法。

但是，在谷歌浏览器中我得到不同的数字；看起来面板只有 892.7999877929688px 高而线是 24.799999660915798px 高。将这两个数字相除仍然是 36。看起来 CSS 中设置的标称像素与 getBoundingClientRect() 报告的实际像素之间存在缩放比例;在我的例子中，这是每真实像素 1.0080645299120465 标称值。

另一个证据来自在 nwjs 应用程序中运行的 Chromium，我最初在该应用程序中观察到差异。在我的测试中，它始终显示出与 Chrome 中的不同比率。现在，在我测试的某个时候，Chromium 报告的像素突然跳到 Firefox 报告的整数值；我不确定我做了什么来实现这一点。

可以预料，分数比率在某种程度上与页面缩放有关；毕竟，在非常小的尺寸下，Chrome 和 Chromium 会重排文本(有时会做错)。事实上，改变 Chrome 中的缩放比例会导致不同的比例，让 Chrome 放大到最大将使比例保持在 1。不过，我的 Chromium 应用程序没有放大到最大并且仍然有 一个小数ratio. 在测试中为整数像素比，但在实际应用中为分数值。

就我目前所知，我所能做的就是获得比率，以便我可以用 JavaScript 进行声音、一致的盒子尺寸测量，就是设置一个已知尺寸的盒子并测量它。

我仍然想知道观察到的行为的来源是什么。有这方面的报道吗？它是渲染器的有意行为还是突发行为？开发者讨论过吗？有获取比例的API吗？

我已经在 https://gist.github.com/loveencounterflow/d8c20b9021d2ab3f573a 的要点上放置了一些代码以简化测试。

Answer 1

某些字体无法以您要求的确切大小呈现，并且字体具有间接影响报告的实际大小的属性。如果你希望每个地方都有相同的行为，也许你必须导入你自己的字体来实现类似的渲染交叉浏览。我在使用 IE 和 Chrome 时遇到了类似的问题。