Google Chrome文字阴影渲染

Question

谷歌Chrome在实现CSS3文本阴影方面存在极其恼人的缺陷.应用文本阴影时,关闭子像素抗锯齿.没有多少-webkit-font-smoothing会说服它.粗糙的α通道抗锯齿导致阴影与字母混合,这与像素化文本一起最终产生非常难看的外观.如果使用手写字体,例如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非常失望!Web排版和CSS3每天都被越来越多的人使用,使网络更加美丽!遗憾的是这样的问题可以减缓这种速度.

因此,需要公众努力来解决这个问题.告诉其他人,写在你的博客中.您可以访问http://code.google.com/p/chromium/issues/detail?id=23440并投票支持该问题.您可以点击位于左上角的星标(需要某种类型的Google帐户--gmail等)来实现.

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

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

我将对发布到关于该问题的文章的每个链接进行投票,并标记为接受最佳的技术解决方案或公共努力.

Answer 1

@ sebastian的修复可能不适用于旧版本的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/