主流瀏覽器中子像素精度的當前狀態是什麼？

我正在研究一個需要高準確性的繪圖應用程序，我想知道哪個主要的瀏覽器平臺（包括HTML Canvas元素和Flash）給出了最佳的子像素佈局精度，元素（Canvas或Flash中的矩形，瀏覽器中絕對定位的DIV）以及文本。主流瀏覽器中子像素精度的當前狀態是什麼？

在本網站和其他網站上有很多與此相關的帖子（請參閱下方的列表），但很多帖子都很老舊，沒有一個總結了當前的情況。

我的理解是，Flash具有對子像素定位的本機支持，使用緹來將對象定位到像素的二十分之一，並且在使用TextLayoutFramework時，此準確性也可以擴展到文本。但至少有一份報告顯示，這在Chrome中無法正常運行。任何人都可以確認嗎？

我對瀏覽器情況的理解是，Firefox 14+支持在頁面佈局和畫布內的文本和繪製元素的子像素定位，但我無法確定這是多麼準確。

我瞭解Chrome（截至v21）根本不支持子像素定位。

我明白IE9不支持子像素定位，但是它從IE下面鏈接的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

來源

2012-09-14 JcFx

是的，並進一步使事情複雜化，我應該補充：準確的比較什麼？我正在尋找與Adobe PDF或InDesign中提供的渲染（沒有連字符和段落組合，其中涉及文本）的匹配，Flash佈局和TLF匹配得相當好，但哪些瀏覽器看起來不太好（至少這是我迄今爲止的研究所展示的）。 – JcFx

嗯，我厭惡獎這一賞金的，儘管大量的關注，我還沒有了解的不同平臺的準確性一個具體的事實。儘管以下兩個答案都很有用，但這兩個答案都沒有真正指出主題。我有一些我自己的研究添加到主題，但沒有足夠的時間在此刻把它寫了，所以我只能讓自動獎把它的課程，也許把東西在元有關發出賞金系統更靈活。 – JcFx

目前，你可以期待最好的四捨五入和子像素支持來自Mozilla與IE作爲亞軍。 IE可能最終會被調整得更好，但是他們的發佈週期太長，以至於Mozilla可能會保持領先。

至於做子像素佈局，你可能會追逐一縷，因爲子像素的優勢提高了抗鋸齒問題，而不是屏幕位置的準確性。無論子像素支持如何，您的圖像永遠不會比真實位置的像素更精確。

一些瀏覽器沒有正確放大的原因與子像素支持無關，這是因爲他們沒有記住準確的位置並正確舍入。換句話說，它們過早地將該位置四捨五入並導致圖像錯位。

來源

2012-09-18 19:59:05

感謝您花時間回覆。「目前，你可以期待最好的四捨五入和子像素支持來自Mozilla，IE作爲亞軍」 - 你有任何數據可以支持它嗎？ – JcFx

簡短回答：
不可以/不可以。
即使通過實驗確定，未來也不保證保持不變。

龍答：
在子像素精度，有一個關於輸入如何獲取/渲染很多中瀏覽器/ OS/HW方差。在大多數新型瀏覽器上啓用了h/w加速功能後，在不同操作系統上運行不同瀏覽器的不同PC之間呈現大量變化。因此，甚至可以通過稍微不同的variations in the rendered output of a common sample來識別每個獨特的用戶。

而不是擔心底層框架的差異，如何設計繪圖應用程序的UI以獨立於這些問題。幾種方法我現在可以想到的是：

允許在縮放/放大級別編輯圖像。
爲元素設計一個對齊網格方法。

更新：
的「放大」操作將您的自定義實現和底層框架不是功能。因此，如果您需要像素精度達到像素1/10的數量級，則需要將10x_zoom（）作爲您網絡應用程序的一部分來實現，它將渲染來自

的數據

第1個像素 - （0,0）處爲10x10像素，
第二像素 - >從（11,11）開始的> 10x10像素。

這種方式可以放大數據視圖，但框架是幸福地沒有意識到這一切，並呈現精確到屏幕上的像素（在我們的情況下現在是圖像像素的1/10）。

同樣重要的是要注意，如果一次完成整個圖像，此操作會消耗大量內存。因此，僅在「縮放窗口」中對圖像的可見部分進行這樣做會更快，並且內存密集程度更低。

在繪圖web應用程序的框架子像素的不準確性可能不會變成是用戶的一個問題，因爲他可以隨時切換到這些模式，並提供精確的輸入一旦付諸實施。

來源

2012-09-19 07:02:37 TheCodeArtist

其他任何有設計繪圖應用程序經驗的人，隨時添加您最喜愛的方法來捕捉準確的輸入... – TheCodeArtist

縮放的問題是，這正是當亞像素不準確顯示時。如果我在Photoshop或Illustrator中創建了一個圖像，該圖像放置在0,0的文檔中，並設置爲14.42像素寬（或者更常見的是以點或釐米爲單位的值，其值爲像素寬度），那麼當我在瀏覽器中打開該文檔並放大時，14.42和四捨五入的14像素之間的差異非常明顯。相對於放置在15像素的相鄰項目，它似乎已經移動到左側。至少在Flash中它實際上是14.4像素寬（精確到最接近的twip）。 – JcFx

好的。我在解決方案中假設的是，「縮放」操作將是應用程序中的自定義實現，而不是從底層框架中刪除。更新了提及相同的答案。 – TheCodeArtist

主流瀏覽器中子像素精度的當前狀態是什麼？

回答

相關問題