[css] 主流浏览器中亚像素精度的当前状态是什么?



Answers

简短回答:
不可以。不可能/记录在案。
即使通过实验确定,也不能保证将来保持不变。

答案很长:
在子像素精度方面,浏览器/ OS / HW之间存在很多关于如何捕获/渲染输入的差异。 在大多数现代浏览器上启用h / w加速后,在不同操作系统上运行不同浏览器的不同PC上呈现的数量存在很大差异。 这么多,甚至可以通过常见样本的渲染输出中稍微不同的变化来识别每个唯一用户。

而不是担心底层框架中的差异,如何设计绘图应用程序的UI以独立于这些问题。 我能想到的几种方法是:

  1. 允许以缩放/放大级别编辑图像。

  2. 为元素设计一个对齐网格方法。

更新:
“缩放”操作将是您的自定义实现,而不是底层框架的功能。 因此,如果您需要子像素精度达到像素的十分之一,则需要将一个10x_zoom()实现为您的web-app的一部分,这将呈现来自

第一个像素 - 在(0,0)处> 10x10像素,
第二个像素 - 从(11,11)开始的> 10x10像素。

通过这种方式,人们可以对数据进行非常放大的视图,但框架仍然没有意识到这一切,并且对屏幕上的像素(在我们的情况下现在是图像像素的1/10)精确呈现。

另外需要注意的是,如果一次完成整个图像,此操作将消耗大量内存。 因此,仅在“缩放窗口”中对图像的可见部分执行此操作将更快并且内存密集程度更低。

一旦在您的绘图web-app中实现,框架中的子像素不准确可能不会成为用户的问题,因为他总是可以切换到这些模式并提供准确的输入。

Question

我正在开发一个需要高精度的绘图应用程序,我想知道哪些主要的浏览器平台(包括HTML Canvas元素和Flash)为绘制的元素提供了最佳的子像素布局精度( “画布”或“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

Chrome Canvas中的子像素渲染

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

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

Sub Pixel CSS定位

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






Related