字体平滑技术？文本阴影在 Chrome 14.0.833.0 或更高版本中呈现不同
Posted
技术标签:
【中文标题】字体平滑技术？文本阴影在 Chrome 14.0.833.0 或更高版本中呈现不同【英文标题】：Font Smoothing Techniques? text-shadow rendering differently in Chrome 14.0.833.0 or higher 【发布时间】：2011-10-13 00:45:47 【问题描述】：编辑：
我们现在使用的是 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 版本）
似乎在较旧的 Chrome 中，文本阴影开始在文本内部一点点然后散开——这也许就是 text-shadow hack 起作用的原因。在较新的 Chrome 中，文本阴影似乎只是从文本外部开始，这就是它不起作用的原因。看看我的意思here。
我的问题基本上是：这是一个错误吗？哪个是预期的行为，如果有的话？我可以使用其他字体平滑解决方法吗？
W3C 的 spec 似乎没有说明预期的行为是什么，尽管我确实看到也许我应该使用 text-outline（有点不受支持，这违背了目的）
【问题讨论】：
在以前（当前）版本的 Chrome 中，我发现文本阴影非常可怕。由于您知道您将文本阴影用于 hacky 目的，因此很难判断这是错误还是有意更改。 顺便问一下，你指的是哪个 ClearType？ Windows XP 及以上版本使用的经典版本，以及许多 WPF 应用程序和 IE9 使用的the new one。 新的。我会更新问题。 @MiG 我不想想要“忘记它”。我想要一个解决方案。 :) 即使CSS3Please 也显示了别名，所以我怀疑除了提供自己的字体之外，目前是否有解决方法。 【参考方案1】：好的，我在这方面花了很多时间，这就是归结为：这是一个错误。
首先，-webkit-font-smoothing:antialiased; 仅适用于 Mac，不适用于 Windows。
我在 Windows7 上，我创建了一个分层的 Pixlr 图像，其中包含我制作的 JSfiddle 的屏幕截图，其中有 4 个不同的元素，每个元素都应用了不同的文本阴影。您可以清楚地看到自 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 中，放大四行文本，在顶层的图层面板中单击复选框并取消选中它，然后再次选中它，一遍又一遍地进行，看看文本阴影的变化有多大。
这应该作为一个错误提交。如果需要，可以使用返回此页面的链接来显示效果。
JSfiddle（我在截图中使用的 JSfiddle） http://jsfiddle.net/nicktheandroid/Xkp9q/
一个半小时前我在微波炉里放了一块馅饼……很冷:(
【讨论】：
非常感谢您花在这方面的时间。由于我提供的“修复”，我将我的帖子标记为答案，但你完全赢得了赏金。再次感谢。 耶赏金！我向 Chrome 提交了错误报告code.google.com/p/chromium/issues/detail?id=91899 太棒了；感谢您提交该文件。我会定义的。留意它。也很奇怪，我只是想给你的答案投票（哈哈！） 哈哈，我只是在查看错误报告，在阅读了您上面的评论后，我只是想对您的问题进行投票，哈哈……天才。【参考方案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> > 其中#000是文本的颜色。这是做什么的 应用两个文本阴影，其中一个被向下推一点， 其他推了上去。这样，文本阴影覆盖了锯齿状边缘。它 稍微增加了文本的体积，但绝对会使其平滑。根据文本的大小，可以使用不同的方法。更小 （但仍然锯齿状）文本可以使用文本阴影，更大的文本可以 使用阴影/描边方法，非常大的文本可以使用 双影法。当然，文字越大越不明显 额外的几个像素成为。你可以看到所有不同的方法 here
【讨论】：
谢谢。我通过轻微的变化取得了成功：-webkit-text-stroke:#000 .5px;.3px 和 .5px 之间的笔划宽度似乎工作得很好。【参考方案3】：
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 中测试并运行良好。
【讨论】：
【参考方案4】：-webkit-font-smoothing:antialiased;
可能对你有用
【讨论】：
【参考方案5】：是的！我找到了解决这个问题的方法。这很奇怪，但对我有用。
所以，为了让它起作用，把这个样式放在你想要平滑的元素上：
-webkit-border-bottom-left-radius: 1px;
text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.01);
overflow: hidden;
我已经用这种风格创建了sample html file，以便您快速测试它。
【讨论】：
您的解决方法不起作用，您的示例看起来完全相同，它们都是锯齿状的。我在 Windows 7 上。【参考方案6】：这确实是许多网络字体（Google Webfonts 以及来自 Typekit 等的高度专业字体）在 Windows 系统（以及最终其他地方）上的 Firefox（左）和 Google Chrome（右）中的外观。可不是闹着玩的！为了澄清这一点：唯一完全搞砸了 Google Webfonts 的浏览器是 Google 的浏览器 Chrome。病到什么程度？ 2013 年 Opera 浏览器将渲染引擎切换为 webkit（=Chrome 中的渲染引擎），所以 Opera 也存在这个问题。
更多：http://www.dev-metal.com/fix-ugly-font-rendering-google-chrome/
【讨论】：
以上是关于字体平滑技术？文本阴影在 Chrome 14.0.833.0 或更高版本中呈现不同的主要内容，如果未能解决你的问题，请参考以下文章