字体平滑技术？在Chrome 14.0.833.0或更高版本中，text-shadow渲染方式不同。

Question

编辑：

我们现在使用的是Chrome 19，但这个问题仍未解决。需要澄清的是：这个问题出现在Windows版本的Chrome中，而不是Linux或Mac。我认为这可能与ClearType有关。Google，请修复此问题。

我一直在使用CSS3的text-shadow来模拟IE9在其他浏览器上的字体平滑效果。基本上，我只是将容器的文本的text-shadow设置为容器的背景。您可以通过在低于Chrome 14.0.833的任何浏览器中为较大的字体元素设置text-shadow来查看其行为。文本看起来很平滑。删除text-shadow，字体看起来锯齿状。 然而，在Chrome 14.0.833（更新：似乎在14.0.834中也“损坏”了）中，这种方法不再有效。 text-shadow属性仍然有效，但工作方式与以前不同。您可以在这里（只需使用不同版本的Chrome加载它）看到其行为。 在旧版Chrome中，似乎文本阴影从文本内部开始，然后扩散出去-这可能就是为什么text-shadow hack起作用的原因。在新版Chrome中，似乎文本阴影从文本外部开始，这就是它无法正常工作的原因。请看这里。

我的问题基本上是：这是一个错误吗？哪个是预期行为（如果有的话）？还有其他字体平滑的解决方法可以使用吗？

W3C的spec似乎没有说明预期的行为，不过我看到也许应该使用text-outline（这有点不支持，这违背了初衷）

- Thomas Shields

---

在之前（当前）的Chrome版本中，我发现文本阴影非常丑陋。由于你知道你正在使用文本阴影来进行巧妙的目的，很难判断这是一个错误还是一次有意的变化。 - BoltClock

新的。我会更新问题。 - Thomas Shields

@BoltClock 是的，我也有同感！ :) 我听说过-webkit-font-smoothing或类似的东西；不确定那是否是我想要的。 - Thomas Shields

@MiG 我不想“忘了它”。我想要一个解决方案。 :) - Thomas Shields

即使 CSS3Please 显示了锯齿，所以我怀疑目前除了提供自己的字体外，没有其他方法可以解决它。 - Andrew

Answer 1

好的，我花了不少时间研究这个问题，最终得出结论：这是一个bug。

首先，-webkit-font-smoothing:antialiased;只适用于Mac系统，而不是Windows系统。

我使用的是Windows7系统，在JSfiddle中创建了四个不同元素并分别应用了不同的text-shadow效果。通过创建一个带有屏幕截图的分层Pixlr图像，可以清楚地看到自Chrome13和Chrome 14.0.835以来text-shadow已经发生了变化。我必须在Beta和Dev渠道之间多次切换，因为我搞砸了，卸载等等。唉。

从以下链接下载我制作的分层Pixlr图像文件：

http://dl.dropbox.com/u/7353877/Chrome-text-shadow-v13-v14_0_835.pxd

然后进入http://pixlr.com/editor/，选择从计算机打开文件，打开文件。现在在Pixlr中，放大到四行文本，在图层面板上的顶部图层单击复选框并取消选中，然后再选中它，一遍又一遍地重复这个过程，看看text-shadow的变化有多大。

这应该被提交为一个bug。如果需要，可以使用指向此页面的链接来展示效果。

JSfiddle（我在截图中使用的JSfiddle） http://jsfiddle.net/nicktheandroid/Xkp9q/

我一个半小时前把一块馅饼放进微波炉里......现在已经凉了 :(

- android.nick

---

非常感谢您花费时间阅读这篇文章。我将我的帖子标记为答案，因为我提供了“修复”方法，但您完全赢得了悬赏。再次感谢。 - Thomas Shields

太好了，我向Chrome提交了一个错误报告 http://code.google.com/p/chromium/issues/detail?id=91899 - android.nick

太棒了，感谢您提交。我一定会关注它的。有点奇怪，我才刚想起给你的答案点赞（哈哈！） - Thomas Shields

哈，我刚刚在查看错误报告，读完你上面的评论后，突然想给你的问题点个赞，哈哈，天才啊。 - android.nick

Answer 2

好的，我已经明白了。有些烦人，因为我设置了赏金，但无论如何。

我相当确定这不是一个bug，并且这是期望的行为——特别是因为我们已经看到Chrome的几个更新版本，但它仍然保持不变。

有几种不同的方法可以解决。我在我的博客上写了一篇文章，你可以在这里看到完整的文章，但这是大部分内容:

首先，我尝试使用 -webkit-text-stroke:1px #000，其中#000是文本的颜色。但是，这种样式适用于文本颜色与描边不同的情况下使用，以获得漂亮的文本轮廓。当两者颜色相同时，它看起来很奇怪。我不确定为什么;我不是字体渲染专家。您可以在该文章后面的图片中看到此行为。

接下来，我尝试了一个简单的text-shadow:#000 0 0 1px，其中#000与文本的颜色相同。由于Chrome 14.0.833+的问题相同，这仍然使字体看起来有点锯齿状。但比纯文本好。

接下来，我尝试了上面两种方法的组合。这看起来好一点，但它会增加文本的大小，因为它实际上将文本的厚度增加了2个像素。

最后，我尝试应用两个text-shadow：text-shadow:#000 0 1px 1px,#000 0 -1px 1px ，其中#000是文本的颜色。这样做的效果是应用两个文本阴影，一个向下推，另一个向上推。这样，文本阴影覆盖了锯齿状的边缘。它会使文本变大一点，但肯定会使其更加平滑。

根据您的文本大小，不同的方法可以奏效。较小（但仍然有锯齿）的文本可以使用text-shadow，较大的文本可以使用阴影/描边方法，非常大的文本可以使用双重阴影方法。当然，文本越大，额外的几个像素就越不突出。您可以在这里查看所有不同的方法。

- Thomas Shields

---

谢谢。我稍微改了一下，现在成功了：-webkit-text-stroke:#000 .5px; 在.3px和.5px之间的描边宽度看起来效果不错。 - David Kirkland

Answer 3

-webkit-font-smoothing:antialiased; 

可能适合你

- tcnarss

Answer 4

text-shadow: transparent 0px 0px 0px, #000 1px 2px 1px;

或者

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

已在不同版本的 Opera、Chrome、Safari 和 Firefox 中进行测试，并且正常工作。

- LosMikEos

Answer 5

这确实是在Windows系统（以及其他地方）上很多网络字体（Google Webfonts和来自Typekit等高级专业字体）在Firefox（左）和Google Chrome（右）中的外观。 不是开玩笑！ 为了澄清这一点：唯一完全混乱了Google Webfonts的浏览器是Google的Chrome浏览器。 多么病态？ 在2013年，Opera浏览器将其渲染引擎切换到webkit（= Chrome中的渲染引擎），因此这个问题也存在于Opera中。

更多信息：http://www.dev-metal.com/fix-ugly-font-rendering-google-chrome/

- Junaid Atari

Answer 6

是的！我已经找到了这个问题的解决方案。虽然有点奇怪，但对我来说很有效。

所以，为了使其正常工作，请在您想要平滑处理的元素上应用此样式：

-webkit-border-bottom-left-radius: 1px;
text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.01);
overflow: hidden;

我已经放置了一个示例HTML文件，只包含这种样式，以便您可以快速测试它。

- giladvdn

---

你的解决方法不起作用，你的示例看起来完全一样，它们都是锯齿状的。我使用的是Windows 7。 - android.nick