两个具有相同字体、大小和颜色的 div.textContent 在 Chrome 中的呈现方式不同

Question

我有 2 个具有相同文本的 div，它们在 Chrome 中的呈现方式不同。

附图是正常大小的两个文本元素的屏幕截图并放大，其中差异更加明显。

这两个元素之间的唯一区别是顶部元素在 HTML 文件中硬编码为 span，而底部元素以编程方式生成为 inline-block div，并在运行时附加。在运行时以编程方式生成它们也不会使它们呈现相同的效果。

为什么会发生这种情况？是否可以让它们呈现相同的效果？

这两个元素的样式都使用字体Muli-Semibold，大​​小12，颜色#45B4E4

@font-face {

    font-family: "Muli-Semibold";
    font-weight: 600;
    font-style: normal;
    src: url("../../fonts/Muli-Semibold.woff2") format("woff2");
}

Answer 1

这实际上与您的字体无关，而是因为您的元素的位置不同。

您所看到的称为抗锯齿（或此处字体平滑），它的完成方式是屏幕上的红、绿和蓝点将呈现尽可能小的线条（所以看起来更平滑）。

该算法显然会为您在像素坐标中的位置输出不同的平滑值。例如，如果一切都完全适合精确的像素，则不会有任何平滑。

但是对于文本，您几乎永远不会使用真正的像素。例如，根据您的规则，我的 chrome 上的第一个跨度为 42.65625px。这意味着下一个内联元素不会从有限像素开始。

这是一个示例，显示从相同 x 值开始的块元素将具有与原始跨度相同的校正，而内联元素将具有不同的校正。

var d = document.createElement('div');
d.textContent = 'testing';
document.body.appendChild(d);
document.body.appendChild(d.cloneNode(1));
d.classList.add('inline')

body{
    color: #45B4E4;
}
div.inline{
  display: inline-block;
}

<span>testing</span>

对于一种解决方法...这很难，因为这可能是由浏览器或操作系统直接引起的。不过，将所有元素放在圆角像素坐标上可能会限制差异。