javascript - 具有相同字体、大小和颜色的两个 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 值开始的 block 元素将具有与原始跨度相同的校正，而内联元素将具有不同的校正。

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>

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