浏览器何时将像素分数四舍五入为完整像素，什么时候不？

Question

我记得在SO上读过，CSS中一般应避免像素分数，因为浏览器倾向于将其舍入为完整像素。

实际上，以下示例显示了0.3像素如何舍入为完整像素：

span {
  border: 0.3px solid black;
}

<span>Lorem ipsum.</span>

我很惊讶，因为我似乎找到了一个反例：

span {
  color: white;
  -webkit-text-stroke: 0.3px black;
}

<span>Lorem ipsum.</span>

与1px：

span {
  color: white;
  -webkit-text-stroke: 1px black;
}

<span>Lorem ipsum.</span>

我不是在抱怨的是它发生，相反它几乎是一个救星我，但我想知道为什么它会发生。

• 浏览器何时将像素分数四舍五入为完整像素？什么时候不呢？这里有什么规则？
• 我可以依靠浏览器不四舍五入0.3px到1px在上面的例子？这种行为在浏览器之间是否一致？还是依靠这种行为来解决麻烦？
• 这怎么发生？在笔记本电脑上，像素（像素）应该不受硬件（显示器）限制的约束吗？

Answer 1

根据规范的舍入取决于实现者（浏览器渲染引擎）。然而，这似乎只适用于边框等布局规则。我认为这是故意的，因为文本渲染似乎利用操作系统级渲染系统，其中包括 HiDPI 显示器和 LCD 的抗锯齿技术。

渲染字体

我的猜测是，您的“工作”示例之所以有效，是因为它是文本。在基于 Webkit 的浏览器中，您可以使用 CSS 调整渲染结果text-rendering。这是Mozilla 的文档

渲染 HTML 元素

但是，如果您想要子像素渲染或更好的平滑效果，您可以将 CSS 应用于transform: translateZ(0)元素。至少在 Chrome 中，我相信其他现代浏览器，这将强制子像素锯齿。但我不知道它会覆盖渲染之前可能发生的浏览器舍入。