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

Question

编辑:

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

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

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

W3C的规范似乎并没有说出预期的行为是什么,虽然我确实看到也许我应该使用文本大纲(这有点不受支持,这违背了目的)

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的一些迭代,并且它保持不变.一些不同的方法工作.我为我的博客写了一些内容,你可以在这里看到完整的文章,但这里有大部分内容:

首先,我尝试了文本的颜色在-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是文本的颜色.这样做是应用两个文本阴影,其中一个被向下推一点而另一个向上推.这样,文本阴影覆盖锯齿状边缘.它略微增加了文本,但绝对平滑了它.

根据文本的大小,不同的方法有效.较小(但仍然是锯齿状)的文本可以使用文本阴影,较大的文本可以使用阴影/笔划方法,而非常大的文本可以使用双阴影方法.当然,文本越大,额外的几个像素变得越不明显.你可以在这里看到所有不同的方法