字体平滑技术？文本阴影渲染在Chrome 14.0.833.0或更高版本中有所不同 [英] Font Smoothing Techniques? text-shadow rendering differently in Chrome 14.0.833.0 or higher

问题描述

EDIT：

现在我们正在使用Chrome 19，但仍然不是固定的。只是澄清：这发生在Windows上的Chrome，而不是Linux或Mac。我认为它与Cleartype有关。 Google，请修正此问题。

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.

我一直在使用CSS3 text-shadow 来模拟IE9的字体平滑在其他浏览器。基本上我只是设置容器的文本的文本阴影到容器的背景。您可以通过在低于Chrome 14.0.833的大型字体元素中设置 text-shadow 来查看行为。文本看起来光滑。删除文本阴影和字体看起来锯齿状。
但是，在Chrome 14.0.833（更新：它也是破碎在14.0.834），这不再工作。 text-shadow属性仍然有效，但不是以前的方式。您可以在这里查看行为（只需加载差异Chrome版本）
看起来好像在旧的Chromes文本阴影在文本内部开始只是一点，然后展开 - 这也许是为什么文本阴影黑客工作。在较新版本的Chrome中，文字阴影会开始显示在 之外的文字，这就是为什么它不工作的原因。请参阅我的意思这里。

I've been using CSS3 text-shadow to 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-shadow on 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 outside the text, which is why it won't work. See what I mean here.

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

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

W3C的 spec 似乎没有说出想要的行为是什么，虽然我没有看到，也许我应该使用text-outline

The W3C's spec didn'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)

推荐答案

好吧，我想出来了，排序。恼人，因为我设置了赏金，但无论如何。
我相当肯定这不是一个错误，它是预期的行为 - 特别是因为我们已经看到了几个迭代的Chrome，它保持不变。
有几种不同的方法工作。我为我的博客写了一篇文章，你可以看到完整的文章在这里，但这里是大部分：

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:

首先，我尝试了 -webkit-text-stroke：1px＃000 其中＃000 是文本的
颜色。但这种风格是用于
的文本的颜色不同于笔触，一个漂亮的文本轮廓。当
都是相同的颜色，它看起来...奇怪。我不知道为什么;我没有
字体呈现专家。您可以在
文章后的图片中看到行为。

First, I tried the -webkit-text-stroke:1px #000 where #000 is 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.

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

Next I tried a simple text-shadow:#000 0 0 1px where #000 is 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.

接下来我尝试了上面的两个尝试。这看起来有点
位更好，但它增加了文本，因为它本质上添加2像素
的文本思想。

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.

最后，我尝试应用两个文本阴影： text-shadow：＃000 0 1px 1px，＃000 0 -1px 1px >>其中＃000 是文本的颜色。这是做什么的
应用两个文本阴影，其中一个被下推一点和
其他推上。这样，文本阴影覆盖锯齿状边缘。

Lastly, I tried applying two text-shadows: text-shadow:#000 0 1px 1px,#000 0 -1px 1px > > where #000 is 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.

根据文本的大小，不同的方法可以工作。较小的
（但仍然有锯齿）文本可以使用文本阴影，较大的文本可以
使用shadow / stroke方法，非常大的文本可以使用
双阴影方法。当然，文本越大，越少的像素变得不太明显。您可以查看所有不同的方法
此处

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

这篇关于字体平滑技术？文本阴影渲染在Chrome 14.0.833.0或更高版本中有所不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！