5

我记得在 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这种行为在浏览器中是否一致？或者依赖这种行为会带来麻烦？
  • 这到底是怎么发生的？在笔记本电脑上，像素应该是硬件（显示器）限制不可分割的？
4

1 回答 1

1

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

渲染字体

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

渲染 HTML 元素

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

于 2019-09-18T22:37:39.303 回答