为什么呈现的像素与真实像素不同？

Question

在我的HTML我有一个<div>（称之为面板）固定宽度，其中包含一些文本;该文本在随附的CSS中设置为font-size: 25px; line-height: 25px;。恰巧文本最终为36行。

考虑到所有边距，填充和边框都为零，您会希望面板的高度为36 * 25px = 900px，这实际上是我在Firefox中使用DOM的getBoundingClientRect()方法找到的。

但是，在Google Chrome中，我得到了不同的数字;它会出现面板只有892.7999877929688px高，而线条是24.799999660915798px高。除了这两个数字仍然给出36。看起来像在CSS中设置的标称像素之间的缩放比例和由getBoundingClientRect()报告的实像素;在我的情况下，这是1.0080645299120465标称每个实像素。

另一项证据来自Chromium在nwjs应用程序中运行，其中我最初观察到这种差异。在我的测试中，它始终显示与Chrome中的不同。现在，在我的测试过程中，Chromium报告的像素突然跳跃到Firefox中报告的整数值;我不确定我是如何做到这一点的。

可以预料的是，分数比率在某种程度上与页面缩放相关联;毕竟，尺寸非常小，Chrome和Chromium会重新排版文字（有时会出错）。实际上，改变Chrome中的缩放比例会导致不同的比例，并且Chrome会将比例放大到最大，但比例会保持为1.尽管如此，我的Chromium应用并未放大到最大值，并且仍然有 的分数比例。 测试中的整数像素比率，但实际应用中的分数值。

对于我现在所知道的，我所能做的就是获得比例，这样我就可以制作声音，用JavaScript测量一致的盒子尺寸，就是设置一个已知尺寸的盒子并测量它。

我还在想知道观察到的行为的来源是什么。有没有关于它的报道？这是渲染器的故意还是紧急行为？开发者曾经讨论过它吗？有没有API来获取比例？

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

Answer 1

某些字体无法以您要求的确切尺寸进行渲染，字体的属性会间接影响报告的实际尺寸。如果你想要每一个相同的行为，也许你必须导入自己的字体来实现类似的渲染交叉浏览。在使用IE和Chrome时，我遇到了类似的问题。