CSS 谷歌浏览器文本阴影渲染
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4046142/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google Chrome text shadow rendering
提问by Boris Hamanov
Google Chrome has an extremely annoying defect in its implementation of CSS3 text-shadow. The sub-pixel antialiasing is turned off when text-shadow is applied. No amount of -webkit-font-smoothing will persuade it otherwise. The crude alpha-channel anti-alias leads to shadow intermixing with the letters and this along with the pixelated text ends up producing a very ugly look. This is even more evident if hand writing fonts are used such as Monotype Corsiva http://www.newfonts.net/index.php?pa=show_font&id=130
谷歌浏览器在 CSS3 文本阴影的实现中有一个非常恼人的缺陷。应用文本阴影时，子像素抗锯齿会关闭。再多的 -webkit-font-smoothing 也无法说服它。粗糙的 alpha 通道抗锯齿导致阴影与字母混合，这与像素化文本一起最终产生非常难看的外观。如果使用手写字体，例如 Monotype Corsiva http://www.newfonts.net/index.php?pa=show_font&id=130，这一点就更加明显
One of the places you can see this clearly is on Twitter - http://dev.twitter.com/pages/auth. The text-shadow is used for text outline there: view the page in Chrome, compare with FF or IE, you will see how bad it is.
您可以清楚地看到这一点的地方之一是在 Twitter 上 - http://dev.twitter.com/pages/auth。text-shadow 用于那里的文本轮廓：在 Chrome 中查看页面，与 FF 或 IE 比较，您将看到它有多糟糕。
The effect gets even worse with smaller text until it renders it completely unreadable. Technical discussion of the issue is available here: http://www.google.com/support/forum/p/Chrome/thread?fid=5d1c0f2082af0f21000483e9a516d36e&hl=en
对于较小的文本，效果会变得更糟，直到完全无法阅读。该问题的技术讨论可在此处获得：http: //www.google.com/support/forum/p/Chrome/thread?fid=5d1c0f2082af0f21000483e9a516d36e& hl=en
There is a bug submitted in the Chromium project (issue 23440). This bug has been around more than a year and is still not assigned to anybody. Google devs saw it, decided it is not so important and left it to age. It turns out they only fix the "popular" bugs, a practice so lame that it looks impressive! I am very disappointed with Chrome! Web typography and CSS3 are used by more and more people every day to make the web much more beautiful place! It is a shame such issue exists to slow that down.
Chromium 项目（issue 23440）中提交了一个错误。这个错误已经存在一年多了，仍然没有分配给任何人。谷歌开发人员看到了它，认为它不是那么重要并让它老化。事实证明，他们只修复了“流行”的错误，这种做法很蹩脚，看起来令人印象深刻！我对 Chrome 非常失望！每天都有越来越多的人使用 Web 排版和 CSS3，使 Web 变得更加美丽！很遗憾存在这样的问题来减慢速度。
So, a public effort is needed to get this one fixed. Tell others about this, write in your blogs. You can go at http://code.google.com/p/chromium/issues/detail?id=23440and vote for the issue. You can do that by clicking at the star located at top left page side (Some type of Google account required - gmail, etc).
因此，需要公共努力来解决这个问题。告诉其他人这件事，写在你的博客上。您可以访问http://code.google.com/p/chromium/issues/detail?id=23440并为该问题投票。您可以通过单击位于页面左上角的星号（需要某种类型的 Google 帐户 - gmail 等）来完成此操作。
To make things more clear - my question has two goals:
为了让事情更清楚 - 我的问题有两个目标：
- Find a technical workaround.
- Make Google fix the issue in Chrome.
- 找到技术解决方法。
- 让 Google 修复 Chrome 中的问题。
I will vote up every link posted to an article about the issue and mark as accepted the best one tech solution or public effort.
我将对发布到有关该问题的文章的每个链接进行投票，并将其标记为公认的最佳技术解决方案或公共努力。
采纳答案by Camilo Martin
@sebastian's fixmay not work for old versions of Chrome.
Screenshot under Iron Browser (Chromium fork) v3.0.197.0:
All the ones that have been assigned a shadow look the same and -webkit-font-smoothinghas no effect as well as -webkit-text-stroke.
@sebastian 的修复可能不适用于旧版本的 Chrome。
Iron Browser (Chromium fork) v3.0.197.0 下的截图：
所有分配了阴影的看起来都一样，-webkit-font-smoothing没有效果和-webkit-text-stroke.
Instead, I've experimented until I've come up with this fix: http://jsbin.com/acalu4
相反，我一直在尝试直到我想出这个修复：http: //jsbin.com/acalu4
tldr:add an innocuous 0 0 0 transparent,before your other shadow(s).
tldr：0 0 0 transparent,在你的其他阴影之前添加一个无害的。
Known issues:some browsers can only handle 1 text-shadow. In order not to affect them (killing their only shadows) this should be applied via javascript only to Chrome.
已知问题：某些浏览器只能处理 1 text-shadow。为了不影响它们（杀死它们唯一的阴影），这应该仅通过 javascript 应用于 Chrome。
回答by Sebastian Patane Masuelli
the first part (technical workaround): Giving the text a thin stroke.
第一部分（技术解决方法）：给文本一个细笔画。
try this css, you might have to tweak the values to get the desired effect.
试试这个 css，您可能需要调整这些值才能获得所需的效果。
-webkit-font-smoothing: subpixel-antialiased; /* or antialiased; */
-webkit-text-stroke: .10pt black; /* or 0.01em might be better */
only webkit browsers (Chrome, Safari) read it, so it won't affect FF or IE.
只有 webkit 浏览器（Chrome、Safari）读取它，所以它不会影响 FF 或 IE。
play with an example here: http://jsfiddle.net/SebastianPataneMasuelli/NfmU7/6/
在这里玩一个例子：http: //jsfiddle.net/SebastianPataneMasuelli/NfmU7/6/
回答by Nathan Querido
I found a solution for this. It seems to work in Safari 4+, Chrome (tested on 8.0x) and Firefox 3.5.
我为此找到了解决方案。它似乎适用于 Safari 4+、Chrome（在 8.0x 上测试）和 Firefox 3.5。
Try it:
尝试一下：
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);
