Google Chrome文字阴影渲染

Question

Google Chrome在实施CSS3文字阴影方面存在极其烦人的缺陷。应用文本阴影时，关闭子像素抗锯齿。没有多少-webkit-font-smoothing会说服它。粗糙的α通道抗锯齿导致阴影与字母混合，这与像素化文本一起最终产生非常难看的外观。如果使用手写字体，例如Monotype Corsiva http://www.newfonts.net/index.php?pa=show_font&id=130

，则更为明显

你可以清楚地看到其中一个地方是推特 - 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非常失望！ Web排版和CSS3每天都被越来越多的人使用，使网络更加美丽！遗憾的是，这样的问题可以减缓这种情况。

因此，需要公众努力才能解决这个问题。告诉其他人，写在你的博客中。你可以去http://code.google.com/p/chromium/issues/detail?id=23440投票支持这个问题。您可以点击位于左上角的星标（需要某种类型的Google帐户--gmail等）来执行此操作。

为了使事情更清楚 - 我的问题有两个目标：

1. 查找技术解决方法。
2. 让Google修复Chrome中的问题。

我会对发布在有关该问题的文章中的每个链接进行投票，并将其标记为接受最佳技术解决方案或公共努力。

Answer 1

@sebastian's fix可能不适用于旧版本的Chrome Iron Browser（Chromium fork）v3.0.197.0下的屏幕截图：

所有已分配阴影的内容看起来都相同，-webkit-font-smoothing与-webkit-text-stroke无效。

相反，我已经做过实验，直到我提出这个问题：http://jsbin.com/acalu4

tldr：在您的其他影子之前添加一个无害的0 0 0 transparent,。

已知问题：某些浏览器只能处理1 text-shadow。为了不影响它们（杀死它们唯一的阴影），这应该只通过javascript应用到Chrome。

Answer 2

第一部分（技术解决方法）：给文本一个细微的笔触。

尝试使用此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/

Answer 3

我找到了解决方案。它似乎适用于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);