13

编辑：

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

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

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

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

4

6 回答 6

8

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

首先，-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/

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

于 2011-08-05T17:13:00.753 回答
5

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

首先，我尝试了文本的颜色在-webkit-text-stroke:1px #000哪里。#000但是这种风格适用于文本颜色与笔划不同的地方，以获得漂亮的文本轮廓。当两者颜色相同时，它看起来……很奇怪。我不知道为什么；我不是字体渲染专家。您可以在文章之后看到图片中的行为。

接下来我尝试了一个简单的text-shadow:#000 0 0 1pxwhere #000is the same color as the text. 由于同样的 Chrome 14.0.833+ 问题，这仍然使字体看起来有些锯齿。但是，它比纯文本要好。

接下来，我尝试了上述两种尝试的结合。这看起来好一点，但它会使文本变大，因为它实际上为文本的思考增加了 2 个像素。

最后，我尝试应用两个文本阴影：text-shadow:#000 0 1px 1px,#000 0 -1px 1px> >#000文本的颜色在哪里。这样做是应用两个文本阴影，其中一个向下推一点，另一个向上推。这样，文本阴影覆盖了锯齿状边缘。它使文本变大了一点，但绝对使它变得平滑。

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

于 2011-08-04T16:08:22.503 回答
1 
-webkit-font-smoothing:antialiased;

可能对你有用

于 2011-07-26T21:19:56.163 回答
1 
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 中测试并运行良好。

于 2012-01-05T05:08:44.130 回答
0

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

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

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

我已经使用这种样式创建了一个示例 HTML 文件，以便您可以快速对其进行测试。

于 2011-09-27T17:29:01.567 回答
0

这确实是许多网络字体（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/

于 2013-12-25T01:10:48.860 回答