字体平滑技术？文本阴影在 Chrome 14.0.833.0 或更高版本中呈现不同答案

【问题标题】：Font Smoothing Techniques? text-shadow rendering differently in Chrome 14.0.833.0 or higher字体平滑技术？文本阴影在 Chrome 14.0.833.0 或更高版本中呈现不同
【发布时间】：2023-03-31 13:47:01
【问题描述】：

编辑：

我们现在使用的是 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 也显示了别名，所以我怀疑除了提供自己的字体之外，目前是否有解决方法。

标签： css windows google-chrome cleartype font-smoothing

【解决方案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 也存在这个问题。

【讨论】：