Question

编辑：

我们现在在Chrome 19中，这仍然没有修复。只是澄清一下：这种情况发生在Windows上的Chrome中，而不是Linux或Mac上。我认为这与Cleartype有关。谷歌，请解决这个问题。

我一直在使用CSS3 text-shadow来模仿IE9在其他浏览器上的字体平滑。基本上我只是将容器文本的文本阴影设置为容器的背景。您可以通过在低于Chrome 14.0.833的任何较大字体元素上设置text-shadow来查看该行为。文字看起来很流畅。删除文本阴影，字体看起来呈锯齿状。但是，在Chrome 14.0.833（更新：看起来它在14.0.834中也被“破坏”）中，这不再起作用。 text-shadow属性仍然有效，但不像以前那样。您可以看到行为here（仅使用差异Chrome版本加载）似乎在较旧的Chromes中，文本阴影在文本内部开始了一点点然后展开 - 这也许是文本阴影黑客工作的原因。在较新的Chrome中，文本阴影看起来只是外部文本，这就是为什么它不起作用。明白我的意思here。

我的问题基本上是： 这是一个错误吗？哪个是预期的行为？我可以使用其他任何字体平滑解决方法吗？

W3C的spec似乎没有说出预期的行为是什么，虽然我确实看到也许我应该使用文字大纲（这有点不受支持，这违背了目的）

Answer 1

好的，我花了很多时间在这上面，这就是它归结为：这是一个错误。

首先，-webkit-font-smoothing:antialiased;仅适用于Mac，而不适用于Windows。

我在Windows7上，我创建了一个分层的Pixlr图像，其中包含一个JSfiddle的屏幕截图，它有4个不同的元素，每个元素都应用了不同的文本阴影。您可以清楚地看到自Chrome13和Chrome 14.0.835以来文字阴影已发生变化。我不得不在Beta和Dev频道之间切换几次，因为我搞砸了，卸载等等。

下载我制作的分层Pixlr图像文件：

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

然后转到http://pixlr.com/editor/并选择从计算机打开文件，打开文件。现在在Pixlr中，放大到四行文本，在顶层的图层面板中单击复选框并取消选中它，然后再次检查它，一遍又一遍地执行它，看看对文本阴影的更改有多么激烈。

这应该作为错误提交。如果需要，可以使用返回此页面的链接来显示效果。

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

我在一个半小时前在微波炉里放了一块馅饼....它很冷:(

Answer 2

好吧，我已经弄清楚了，排序。因为我设定了赏金，但是无论如何都很烦人。我相当肯定这不是一个错误而且是预期的行为 - 特别是因为我们已经看到了Chrome的一些迭代，并且它保持不变。一些不同的方法工作。我为我的博客写了一些内容，你可以看到完整的文章here，但这里有大部分内容：

首先，我尝试了-webkit-text-stroke:1px #000 #000所在的地方   文字的颜色。但这种风格适合用于颜色的地方   对于一个漂亮的文本轮廓，文本与笔划不同。什么时候   两者颜色相同，看起来很奇怪。我不确定为什么;我不是   字体渲染专家。您可以在后面看到图片中的行为   这篇文章。

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

接下来，我尝试了上述两次尝试的组合。这看起来有点   更好一点，但它增加了文本，因为它基本上增加了2个像素   对文本的思考。

最后，我尝试应用两个文字阴影：text-shadow:#000 0 1px 1px,#000 0 -1px 1px＆gt; ＆GT;其中#000是文本的颜色。这是做什么的   应用两个文本阴影，其中一个被推下来一点点   其他推高了。这样，文本阴影覆盖锯齿状边缘。它   稍微增加了一些文字，但肯定会使它平滑。

根据文字的大小，不同的方法有效。较小   （但仍然是锯齿状的）文本可以使用文本阴影，更大的文本可以   使用shadow / stroke方法，非常大的文本可以使用   双阴影法。当然文字越大越不明显   额外的几个像素变成了。您可以看到所有不同的方法   here

Answer 3

-webkit-font-smoothing:antialiased;

可能适合你

Answer 4

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

OR

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

经过测试，可在不同版本的Opera，Chrome，Safari＆amp; Firefox浏览器。

Answer 5

YES！我找到了解决这个问题的方法。这很奇怪，但它对我有用。

因此，要使其工作，请将此样式放在要平滑的元素上：

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

我只使用这种风格设置sample HTML file，以便您快速测试它。

Answer 6

这确实是很多webfonts（Google Webfonts以及Typekit等高度专业的字体）在Windows系统（最终在其他地方）的Firefox（左）和谷歌Chrome（右）中的样子。可不是闹着玩的！澄清一下：唯一完全搞砸Google Webfonts的浏览器是Google的浏览器Chrome。这有多恶心？ 2013年，Opera浏览器已将其渲染引擎切换为webkit（= Chrome中的rending引擎），因此Opera中也存在此问题。

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

字体平滑技术？ Chrome 14.0.833.0或更高版本中的文本阴影呈现方式不同

编辑：

6 个答案: