谷歌瀏覽器文字陰影渲染

谷歌瀏覽器在其CSS3文字陰影的實現中有一個非常惱人的缺陷。應用文本陰影時，子像素抗鋸齒功能將關閉。否則，-webkit-font-smoothing無法說服它。粗糙的alpha通道反混疊會導致陰影與字母混合，並且隨着像素化文本一起產生非常醜陋的外觀。這更加明顯，如果使用手寫字體，如Monotype Corsiva http://www.newfonts.net/index.php?pa=show_font&id=130 谷歌瀏覽器文字陰影渲染

其中一個地方，你可以清楚地看到這是在Twitter - http://dev.twitter.com/pages/auth。文本陰影用於在那裏的文字大綱：在Chrome中查看頁面，與FF或IE比較，您會看到它有多糟糕。

效果變得更糟，更小的文字，直到它使其完全不可讀。關於這個問題的技術討論可以在這裏找到：http://www.google.com/support/forum/p/Chrome/thread?fid=5d1c0f2082af0f21000483e9a516d36e&hl=en

在Chromium項目（問題23440）中提交了一個錯誤。這個bug已經有一年多的時間了，仍然沒有被分配給任何人。谷歌的開發者看到了它，認爲它不是那麼重要，並且讓它變老。事實證明，他們只是修復了「流行」的錯誤，這種蹩腳的做法令人印象深刻！我對Chrome非常失望！網頁排版和CSS3被越來越多的人每天使用，使網站更美麗的地方！存在這樣的問題可以減緩這種情況。

因此，需要一個公共的努力來修復這個問題。告訴其他人，寫在你的博客。你可以去http://code.google.com/p/chromium/issues/detail?id=23440併爲這個問題投票。您可以通過點擊位於左上角的明星（需要某種類型的Google帳戶 - Gmail等）來完成此操作。

爲了讓事情變得更加清晰 - 我的問題有兩個目標：

找到一個技術解決方法。
讓Google解決Chrome中的問題。

我會投票發佈到關於該問題的文章的每一個鏈接，並標記爲接受最好的一種技術解決方案或公共努力。

來源

2010-10-28 Boris Hamanov

@sebastian's fix可能不適用於舊版本的Chrome工作。
Iron Browser（Chromium fork）v3.0.197下的屏幕截圖。0：

已指派一個影子看起來是一樣的，並-webkit-font-smoothing沒有效果以及-webkit-text-stroke的所有的人。

相反，我已經試驗，直到我來到了這個修復：http://jsbin.com/acalu4

tldr：你的其他的陰影（S）前添加無害0 0 0 transparent,。

已知問題：某些瀏覽器只能處理1 text-shadow。爲了不影響他們（殺死他們唯一的陰影），這應該只通過JavaScript應用到Chrome。

來源

2011-01-28 17:59:44

它確實有效！謝謝朋友！非常好的答案！ – 2011-01-29 12:47:32

完美！謝謝。 – jsonx 2011-06-29 18:58:37

令人驚歎的答案。謝謝。 – 2011-08-11 22:17:43

第一部分（技術解決方法）：給文本一個細筆畫。

嘗試此CSS，您可能需要調整值以獲得所需的效果。

-webkit-font-smoothing: subpixel-antialiased; /* or antialiased; */ 
-webkit-text-stroke: .10pt black; /* or 0.01em might be better */

只有webkit瀏覽器（Chrome，Safari）讀取它，所以它不會影響FF或IE。

戲在這裏一個例子：http://jsfiddle.net/SebastianPataneMasuelli/NfmU7/6/

來源

2010-11-23 08:45:10

對不起，說它不起作用。 -webkit-font-smoothing：subpixel-antialiased;無論如何，將其設置爲antialiased似乎沒有什麼區別。 webkit-text-stroke實際上是繪製在文本內部，字母非常薄，所以沒有東西可以使它們更薄。 Chrome瀏覽器遇到的實際問題是，陰影將投射到相鄰的字母上，而不是它們應該顯示的那樣。我會更新我的問題。 – 2010-11-24 15:39:01

它的工作..在Mac上：http://christophzillgens.com/en/articles/-webkit-font-smoothing-reloaded – 2010-11-25 09:07:25

也許它的作品使文本更具可讀性，但我的問題實際上不是與文本，但與它的影子。如果完全沒問題，沒有文字 - 遮蔽文字。是的，抗鋸齒對窗戶沒有任何影響。 – 2010-11-25 10:28:35

我找到了一個解決方案。它似乎可以在Safari 4+，Chrome（8.0x測試）和Firefox 3.5上運行。

試試：

text-shadow: 0px 0px rgba(0,0,0,0.75), 
      0px 1px rgba(0,0,0,0.75), 
      1px 0px rgba(0,0,0,0.75), 
      0px 0px rgba(0,0,0,0.75);

來源

2011-01-16 00:21:25

該修復程序如何工作？你能不能詳細說明一下？它似乎會創建四個陰影而不是一個？該修復究竟是什麼？四個陰影？這確切的參數，smth。像魔術數字？當我添加這個影子聲明時會發生什麼？我刪除它嗎？ – 2011-01-26 22:13:23

@ avok00。我知道這是有效的。如果我沒有弄錯，每個組都放置陰影頂部，右側，底部，左側。然後，我相信你知道這一點，但文字陰影語法使用X偏移量，Y偏移量，模糊和顏色（rgb和a當然是alpha）。所以，在我上面的文章中，我們不使用模糊，因爲陰影被繪製爲頂部，右側，底部和左側。 text-shadow：* TOP * x-offset y-offset rgba（0,0,0,0.75），* RIGHT * x-offset y-offset rgba（0,0,0,0.75）等... 我希望這有助於並且足夠清楚！ – 2011-01-26 23:27:16

我錯了。這與頂部，右側，底部，左側沒有任何關係，而是多層陰影。 Chris Spooner在這裏有一系列的演示：http://line25.com/articles/using-css-text-shadow-to-create-cool-text-effects。查看Fire示例！ – 2011-01-26 23:36:40

谷歌瀏覽器文字陰影渲染

回答

相關問題