为什么在 HDPI 屏幕上的行之间会添加一个微小的间隙，从而导致这种条纹效果？

Question

我有一个令人费解的 CSS 问题，在高 DPI 屏幕上，具有背景颜色的多行在高 DPI 屏幕上有非常小的差距。

@font-face {
    font-family: 'Iosevka';
    font-style: normal;
    font-weight: 400;
    src: url(https://curiousdannii.github.io/parchment-testing/fonts/build/iosevka-custom-extended.woff2) format('woff2');
}

.BufferWindow {
    font-family: Georgia;
    font-size: 15px;
    line-height: 1.4;
    overflow-y: auto;
    scrollbar-gutter: stable;
}

.BufferLine {
    white-space: pre-wrap;
}

span.Style_preformatted {
    font-size: 1em;
    font-weight: normal;
    font-style: normal;
    font-family: Iosevka;
}

.reverse {
    background: black;
    color: white;
    display: inline-block;
}

<div class="BufferWindow">
    <div class="BufferLine Style_preformatted"><span class="Style_preformatted">         </span><span class="Style_preformatted reverse">   </span><span class="Style_preformatted"> </span><span class="Style_preformatted reverse">   </span></div>
    <div class="BufferLine Style_preformatted"><span class="Style_preformatted">         </span><span class="Style_preformatted reverse">       </span></div>
    <div class="BufferLine Style_preformatted"><span class="Style_preformatted">         </span><span class="Style_preformatted reverse">      </span><span class="Style_preformatted">  </span></div>
    <div class="BufferLine Style_preformatted"><span class="Style_preformatted">         </span><span class="Style_preformatted reverse">       </span></div>
    <div class="BufferLine Style_preformatted"><span class="Style_preformatted">         </span><span class="Style_preformatted reverse">       </span></div>
</div>

屏幕截图显示了它在非 HDPI 屏幕上的设计外观：

截图直接来自我的 phone:

来自远程开发工具的屏幕截图显示了一行的高度，即 21 像素：

来自远程开发工具的屏幕截图显示了所有五行的高度，即 107 像素：

因此在非 HDPI 屏幕上，所有五行的高度均为 105 像素，即 5 乘以 21 像素。它以某种方式在 HDPI 屏幕上添加了两个额外的像素。

然后我在开发工具中看到 BufferLine 的高度实际上不是 21 像素，而是 21.364:

我想知道是不是 line-height: 1.4 乘法器产生的东西几乎但不完全是 21 像素高，这只在 HDPI 屏幕上才有意义，但 15 * 1.4 = 21 恰好（我一定是设计的这在过去是明智的；））。所以我不确定是什么原因导致身高增加了一点。

如何确定我的 CSS 的哪一部分导致了这种情况，我怎样才能使它更可靠？

Answer 1

更新：下面的内容似乎不正确 - 虽然它对我有效，但对 OP 无效。下面暂时留在这里作为讨论的依据。

之所以会出现这种现象，是因为两种字体对待上行字母的方式不同。

格鲁吉亚的一个特点是上升明显高于上限。

来自https://taylorhieber.co/georgia-type-set

如果您将 Georgia 替换为没有这种差异的字体，那么间隙就会消失。

此代码段使用另一种衬线字体 Times New Roman，但在上升部没有此 'extra' 高度：

@font-face {
    font-family: 'Iosevka';
    font-style: normal;
    font-weight: 400;
    src: url(https://curiousdannii.github.io/parchment-testing/fonts/build/iosevka-custom-extended.woff2) format('woff2');
}

.BufferWindow {
    font-family: 'Times New Roman';
    font-size: 15px;
    line-height: 1.4;
    overflow-y: auto;
    scrollbar-gutter: stable;
}

.BufferLine {
    white-space: pre-wrap;
}

span.Style_preformatted {
    font-size: 1em;
    font-weight: normal;
    font-style: normal;
    font-family: Iosevka;
}

.reverse {
    background: black;
    color: white;
    display: inline-block;
}

<div class="BufferWindow">
    <div class="BufferLine Style_preformatted"><span class="Style_preformatted">         </span><span class="Style_preformatted reverse">   </span><span class="Style_preformatted"> </span><span class="Style_preformatted reverse">   </span></div>
    <div class="BufferLine Style_preformatted"><span class="Style_preformatted">         </span><span class="Style_preformatted reverse">       </span></div>
    <div class="BufferLine Style_preformatted"><span class="Style_preformatted">         </span><span class="Style_preformatted reverse">      </span><span class="Style_preformatted">  </span></div>
    <div class="BufferLine Style_preformatted"><span class="Style_preformatted">         </span><span class="Style_preformatted reverse">       </span></div>
    <div class="BufferLine Style_preformatted"><span class="Style_preformatted">         </span><span class="Style_preformatted reverse">       </span></div>
</div>

脚注：我不完全相信这是因为格鲁吉亚的上升（相对）高于 Times New Roman，可能只是字体在整体解释行高方面有所不同。希望有人能证实或否认。无论如何，使用不同的衬线字体似乎可以解决白线问题。对不同衬线字体进行更多实验可能会很有趣。

Answer 2

你的安排基本上是这样的：

（1/2L = 半行）

字符按基线对齐，但由于上升 and/or 下降不同，它们的顶部和底部不对齐，总高度大于任何一个字符。

从这里你应该可以看出，可以通过使用相同的字体来避免问题，或者通过降低其中一个的行高，使它们的 half-leadings 变得很小（或负数）总的顶边和底边都由同一个字符决定。

为什么在 HDPI 屏幕上的行之间会添加一个微小的间隙，从而导致这种条纹效果？

Why is a slight gap added between rows on HDPI screens, causing this striped effect?

css

hdpi