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

Font Smoothing Techniques? text-shadow rendering differently in Chrome 14.0.833.0 or higher

提问by Thomas Shields

EDIT:

We're in Chrome 19 now, and this still isn't fixed. Just a clarification: this happens in Chrome on Windows, not Linux or Mac. I think it has to do with Cleartype. Google, please fix this.

编辑：

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

I've been using CSS3 text-shadowto emulate IE9's font smoothing on other browsers. Basically I've just set the text-shadow of a container's text to the container's background. You can see the behavior by setting text-shadowon a largish font element in anything lower than Chrome 14.0.833. The text looks smooth. Remove the text-shadow and the font looks jagged. However, in Chrome 14.0.833 (UPDATE: appears it's also "broken" in 14.0.834) this no longer works. The text-shadow property still works, but not in the way it did before. You can see the behavior here(just load it up with diff. Chrome versions) It seems as if in the older Chromes the text shadow began inside the text just a little and then spread out - which is perhaps why the text-shadow hack worked. In the newer Chrome, it appears the text shadow starts just outsidethe text, which is why it won't work. See what I mean here.

我一直在使用 CSS3text-shadow在其他浏览器上模拟 IE9 的字体平滑。基本上我只是将容器文本的文本阴影设置为容器的背景。您可以通过text-shadow在低于 Chrome 14.0.833 的任何内容中设置较大的字体元素来查看行为。文字看起来很流畅。删除文本阴影，字体看起来有锯齿。但是，在 Chrome 14.0.833（更新：似乎它在 14.0.834 中也“损坏”）中，这不再有效。text-shadow 属性仍然有效，但不像以前那样。你可以在这里看到行为（只需使用 diff. Chrome 版本加载它）似乎在较旧的 Chrome 中，文本阴影从文本内部开始，然后散开 - 这也许是 text-shadow hack 起作用的原因。在较新的 Chrome 中，文本阴影似乎从文本外部开始，这就是它不起作用的原因。明白我的意思在这里。

My question is basically: Is this a bug? Which is expected behavior, if either? Are there any other font smoothing workarounds I can use?

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

The W3C's specdidn't seem to say what the intended behavior is, though I did see that perhaps I should be using text-outline (which is kinda unsupported, which defeats the purpose)

W3C 的规范似乎没有说明预期的行为是什么，尽管我确实看到也许我应该使用文本大纲（这有点不受支持，这违背了目的）

采纳答案by Thomas Shields

Well, I've figured it out, sorta. Annoying since I set a bounty, but whatever. I'm fairly certain this is not a bug and it is expected behavior - especially since we've seen a few more iterations of Chrome and it's stayed the same. A few different methods work. I wrote up a bit for my blog, you can see the full article here, but here's the bulk of it:

嗯，我已经想通了，有点。烦人，因为我设置了赏金，但无论如何。我相当确定这不是一个错误，它是预期的行为 - 特别是因为我们已经看到了更多的 Chrome 迭代并且它保持不变。几种不同的方法有效。我为我的博客写了一点，你可以在这里看到完整的文章，但这里是其中的大部分：

First, I tried the -webkit-text-stroke:1px #000where #000is the color of the text. But this style is meant for use where the color of the text is different from the stroke, for a nice text-outline. When both are the same color, it looks...odd. I'm not sure why; I'm no font-rendering expert. You can see the behavior in the picture after the article.

Next I tried a simple text-shadow:#000 0 0 1pxwhere #000is the same color as the text. Due to the same Chrome 14.0.833+ problem, this still leaves the font looking somewhat jagged. It's better than just plain text, however.

Next I tried a combined the two attempts above. This looks a little bit better, but it bulks up the text as it essentially adds 2 pixels to the thinkness of the text.

Lastly, I tried applying two text-shadows: text-shadow:#000 0 1px 1px,#000 0 -1px 1px> > where #000is the color of the text. What this does is apply two text shadows, one of which is pushed down a little and the other pushed up. This way, the text shadow covers the jagged edges. It bulks up the text a little but definitely smooths it out.

Depending on the size of your text, different methods work. Smaller (but still jagged) text could use the text-shadow, larger text could use the shadow/stroke method, and very large text could use the dual-shadow method. Of course the larger the text the less noticeable the extra few pixels become. You can see all the different methods 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> >#000文本的颜色在哪里。这样做是应用两个文本阴影，其中一个向下推一点，另一个向上推。这样，文本阴影覆盖了锯齿状边缘。它稍微放大了文本，但肯定会使其平滑。

根据文本的大小，使用不同的方法。较小（但仍呈锯齿状）的文本可以使用文本阴影，较大的文本可以使用阴影/描边方法，非常大的文本可以使用双阴影方法。当然，文本越大，额外的几个像素变得越不明显。你可以在这里看到所有不同的方法

回答by android.nick

Okay, i've spend quite a bit of time on this and this is what it comes down to: It's a bug.

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

First of all, -webkit-font-smoothing:antialiased;only works for Mac, not Windows.

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

I'm on Windows7, I've created a layered Pixlr image with screen shots of a JSfiddle I made that had 4 different elements with different text-shadow applied to each. You can clearly see that text-shadow has changed since Chrome13 and Chrome 14.0.835. I had to switch between the Beta and Dev channel a couple of times because I messed up, uninstalling etc. ugh.

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

Download the layered Pixlr image file I made from:

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

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

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

Then go to http://pixlr.com/editor/and choose to open file from computer, open the file. Now in Pixlr, zoom in to the four rows of text, in the layers panel on the top layer click the checkbox and uncheck it, then check it again, do it over and over and see how drastic the change to text-shadow is.

然后去http://pixlr.com/editor/选择从电脑打开文件，打开文件。现在在 Pixlr 中，放大到四行文本，在顶层的图层面板中单击复选框并取消选中它，然后再次选中它，一遍又一遍地进行，看看文本阴影的变化有多么剧烈。

This should be submitted as a bug. A link back to this page could be used to show the effect, if needed.

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

JSfiddle (The JSfiddle I used in the screenshots) http://jsfiddle.net/nicktheandroid/Xkp9q/

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

I put a piece of pie in the microwave an hour and a half ago.... it's cold :(

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

回答by LosMikEos

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;

Tested and works fine in different versions of Opera, Chrome, Safari & Firefox.

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

回答by tcnarss

-webkit-font-smoothing:antialiased; 

might work for you

可能对你有用

回答by giladvdn

YES! I've found a solution for this problem. It's weird, but it works for me.

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

So, to make it work, put this style on the element you want to smooth:

所以，为了让它工作，把这个样式放在你想要平滑的元素上：

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

I've put up a sample HTML filewith just this style so you can quickly test it.

我已经提供了一个具有这种风格的示例 HTML 文件，以便您可以快速测试它。

回答by Junaid Atari

This was indeed how a lot of webfonts (Google Webfonts and also highly professional fonts from Typekit etc.) looked in Firefox (left) and Google Chrome (right) on Windows systems (and eventually elsewhere too). No joke! To clarify this: The only browser that completely messed up Google Webfonts was Google's browser Chrome. How sick is that ? In 2013 Opera browser has switched it's rendering engine to webkit (=the rending engine in Chrome), so this problem exists in Opera too.

这确实是许多网络字体（Google Webfonts 以及来自 Typekit 等的高度专业字体）在 Windows 系统（以及最终其他地方）上的 Firefox（左）和 Google Chrome（右）中的外观。不是开玩笑！澄清一下：唯一完全搞砸了 Google Webfonts 的浏览器是 Google 的浏览器 Chrome。那病到什么程度？2013年Opera浏览器将渲染引擎切换到webkit（=Chrome中的渲染引擎），所以Opera也存在这个问题。

more : http://www.dev-metal.com/fix-ugly-font-rendering-google-chrome/

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