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

Question

我有两个具有相同文字的div，在Chrome中呈现的方式不同。

附加图像是正常尺寸和放大的两个文本元素的屏幕截图，其中方差更明显。

两个元素之间的唯一区别是顶部的一个在HTML文件中被硬编码为*ngIf，而底部的一个以编程方式生成为span并在运行时附加。在运行时以编程方式生成它们并不能使它们呈现相同的颜色。

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

两个元素的样式均为字体 Muli-Semibold ，尺寸inline-block div，颜色12

#45B4E4

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>

对于解决方法......这很难，因为这可能是由浏览器引起的，也可能是由OS直接引起的。但是，将所有元素放在圆角像素坐标上可能会限制差异。