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

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 app中运行的Chromium,我最初观察到这种差异.在我的测试中,它显示出与 Chrome中不同的比例.现在,在我测试的某个时刻,Chromium报告的像素突然跳到Firefox中报告的整数值; 我不知道我做了什么来实现这一目标.

可以预期分数比率在某种程度上与页面缩放有关; 毕竟,在非常小的尺寸下,Chrome和Chromium会对文本进行重排(有时会出错).事实上,改变Chrome的变焦会导致不同的比例,并且Chrome放大到最大值会使比率变为1.仍然,我的Chromium应用程序没有放大到最大值并且仍然具有小数比率.测试中的整数像素比率,但实际app中的小数值.

对于我目前所知的所有,我可以做的就是获得比率,这样我就能用JavaScript进行声音,一致的盒子大小测量就是设置一个已知大小的盒子并测量它.

我仍然想知道观察到的行为的来源是什么.有没有报道呢？它是渲染器的故意还是紧急行为？这是开发人员曾经讨论过的吗？是否有API来获得比率？

我在https://gist.github.com/loveencounterflow/d8c20b9021d2ab3f573a上写了一些代码,以简化测试.

Answer 1

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