css - 主要浏览器中亚像素精度的当前状态是什么？

Question

我正在开发一个需要高精度的绘图应用程序，我想知道哪个主要浏览器平台(包括 HTML Canvas 元素和 Flash)提供最佳的亚像素布局精度，无论是对于绘制元素(Canvas 或 Flash 中的矩形，浏览器中绝对定位的 DIV)和文本。

本网站和其他网站上有很多与此相关的帖子(见底部列表)，但很多都比较老，没有一个总结当前情况。

我的理解是 Flash 原生支持子像素定位，使用缇将对象定位到二十分之一像素，并且当使用 TextLayoutFramework 时，这种精度也扩展到文本。然而，至少有一份报告称这在 Chrome 中无法正常工作。谁能证实这一点？

我对浏览器情况的理解是，Firefox 14+ 支持在页面布局和 Canvas 中对文本和绘制元素进行亚像素定位，但我无法确定这有多准确。

我了解 Chrome(从 v21 开始)根本不支持子像素定位。

我知道 IE9 不支持子像素定位，但从下面链接的 MS 博客文章看来，IE10 支持。

我不知道这是否存在任何 Mac/PC 差异，我也不知道 Flash 的准确性是否因平台和/或浏览器而异。

我理解这样一个概括性的问题可能会引起一些争论，但我相信这已经足够具体，足以让人们提供有用的答案，希望这个帖子可以为目前定位精度的状态提供引用。

一些引用资料:

http://blogs.msdn.com/b/ie/archive/2012/02/17/sub-pixel-rendering-and-the-css-object-model.aspx

Sub-pixel rendering in Chrome Canvas

http://johnblackburne.blogspot.co.uk/2011/11/twips.html

http://ejohn.org/blog/sub-pixel-problems-in-css/

Sub Pixel CSS positioning

https://productforums.google.com/forum/?fromgroups=#!topic/chrome/pRt3tiVIkSI

Answer 1

目前，您可以期待最好的舍入和子像素支持来自 Mozilla，而 IE 位居第二。 IE 最终可能会得到更精细的调整，但它们的发布周期太长，Mozilla 可能会领先于它们。

就进行子像素布局而言，您可能会一头雾水，因为子像素的优势改善了抗锯齿问题，而不是屏幕定位精度。无论子像素支持如何，您的图像都不会比真实位置的 1 个像素更准确。

某些浏览器不能正确缩放的原因与子像素支持无关，这是因为它们没有记住确切的位置和正确的舍入。换句话说，它们过早地舍入了位置，导致图像未对齐。