谷歌 Chrome 浏览器有没有“字体平滑”功能？

我使用谷歌网络字体和他们罚款超大字体大小，但在18px，他们看起来很糟糕。我到处读到有一些方法可以解决字体平滑问题，但是我没有找到任何方法可以清楚地解释这个问题，而且我找到的一些片段根本不起作用。

我的 h4在几乎所有浏览器中看起来都很糟糕，但 Chrome 是最糟糕的。在 Chrome 中，几乎所有的字体看起来都很糟糕。

有人能给我指出正确的方向吗? 也许你知道一个资源可以清楚地解释这一点? 谢谢！

示例屏幕截图 # 1

这个截图显示了 https://www.dartlang.org/的主页，这是一种由 Google 开发的编程语言(所以我们可以暗示这个网站也是由 Google 开发的) ，并且使用了 Google Webfonts。

屏幕截图显示左边是谷歌浏览器，右边是火狐/Internet Explorer 浏览器:

google chrome on the left, firefox/internet explorer on the right

示例屏幕截图 # 2

这个截图显示了 Adobe.com 上的一个产品信息页面，使用了 Typekit 提供的 webfont。Adobe 和 Typekit 在字体方面是专业的。

屏幕截图显示谷歌浏览器在右边，火狐/Internet Explorer 在左边:

google chrome on the left, firefox/internet explorer on the right

160838 次浏览
小开

Chrome 不像 Firefox 或其他浏览器那样呈现字体。这在只在 Windows 上运行的 Chrome 浏览器中通常是一个问题。如果你想使字体平滑，使用 -webkit-font-smoothing属性在 yerh4标签上，如下所示。

h4 {
-webkit-font-smoothing: antialiased;
}

你也可以使用 subpixel-antialiased，这将给你不同类型的平滑(使文本有点模糊/阴影)。但是，您需要一个夜间版本来查看效果。你可以学习更多关于字体平滑 给你的知识。

小开
最佳答案

问题的状态，2014年6月: Chrome 37的修复

最后，针对这个问题的 Chrome 团队 将释放一个修复程序和 Chrome 37将于2014年7月发布。点击这里查看当前稳定版 Chrome 35和最新版 Chrome 37(早期开发预览版)的比较:

enter image description here

问题的现况，2013年12月

1)当通过 @import，<link href=或 Google 的 webfont.js加载字体时，有 没有合适的解决方案。问题是 Chrome 只是从 Google 的 API 中请求 。沃夫文件，而这些文件的渲染效果非常糟糕。令人惊讶的是，所有其他字体文件类型渲染漂亮。然而，有一些 CSS 技巧，将“平滑”渲染的字体一点点，你会发现这个答案的解决办法更深。

2)有一个真正的解决方案，当自托管的字体，第一张由 詹姆 · 费尔南德斯(Jaime Fernandez)在这个 Stackoverflow 页面上的另一个答案，它修复了这个问题，加载网页字体在一个特殊的顺序。如果仅仅抄袭他的精彩答案，我会感到不安，所以请看那里。还有一个(未经证实的)解决方案，建议只使用 TTF/OTF 字体，因为现在几乎所有的浏览器都支持它们。

3)谷歌 Chrome 开发团队正在研究这个问题。由于渲染引擎已经有了几个巨大的变化，显然有些东西正在进行中。

我写过一篇关于这个问题的大型博客文章，你可以随便看看: 如何修复谷歌 Chrome 浏览器中的丑陋字体渲染

可复制的例子

看看第一个问题的例子，在 Chrome 29中是什么样子:

正面例子:

左: Firefox 23，右: Chrome 29

enter image description here

正面例子:

上图: Firefox 23，下图: Chrome 29

enter image description here

负面例子: Chrome30

enter image description here

负面例子: Chrome29

enter image description here

解决方案

用-webkit-text-Stroke 修复上面的截图:

enter image description here

第一行为默认值，第二行为:

-webkit-text-stroke: 0.3px;

第三排有:

-webkit-text-stroke: 0.6px;

所以，修复这些字体的方法就是

-webkit-text-stroke: 0.Xpx;

或者 RGBa 语法(通过 nezroy，可以在注释中找到! 谢谢!)

-webkit-text-stroke: 1px rgba(0,0,0,0.1)

还有一种过时的可能性: 给文本一个简单的(假的)阴影:

text-shadow: #fff 0px 1px 1px;

RGBa 解决方案(可以在 Jasper Espejo 的博客中找到) :

text-shadow: 0 0 1px rgba(51,51,51,0.2);

我在博客上写道:

如果你想了解这个问题的最新进展，可以看看相应的博客文章: 如何修复谷歌浏览器中丑陋的字体渲染。如果有新消息，我会发布的。

我最初的回答是:

这是谷歌浏览器的一个大漏洞，谷歌浏览器团队也知道这一点，请参阅官方的漏洞报告 给你。目前，在2013年5月，甚至在漏洞被报告11个月后，它仍然没有被解决。奇怪的是，唯一搞乱 Google Webfont 的浏览器是 Google 自己的 Chrome (!).但是有一个简单的解决方法可以解决这个问题，请看下面的解决方案。

2013年5月 GOOGLE CHROME 开发团队的声明

错误报告中的正式声明评论意见:

我们的 Windows 字体渲染正在积极地进行中。我们希望在一两个里程碑之内有一些东西可以让开发人员开始使用。它稳定的速度有多快，一如既往，完全取决于我们能以多快的速度根除和消除任何回归。

小开

好的，你可以简单地使用这个

-webkit-text-stroke-width: .7px;
-webkit-text-stroke-color: #34343b;
-webkit-font-smoothing:antialiased;

确保您的文字颜色和上文字笔画宽度必须我相同，就是这样。

小开

我也遇到了同样的问题我在 山姆 · 戈达德的职位中找到了解决方案,

解决方案如果到 定义了两次对字体的调用。首先，建议所有浏览器都使用它，并且在一个特殊的媒体查询下，只对 Chrome 进行一次特殊的调用:

@font-face {
font-family: 'chunk-webfont';
src: url('../../includes/fonts/chunk-webfont.eot');
src: url('../../includes/fonts/chunk-webfont.eot?#iefix') format('eot'),
url('../../includes/fonts/chunk-webfont.woff') format('woff'),
url('../../includes/fonts/chunk-webfont.ttf') format('truetype'),
url('../../includes/fonts/chunk-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}


@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'chunk-webfont';
src: url('../../includes/fonts/chunk-webfont.svg') format('svg');
}
}

enter image description here

使用这种方法，字体在所有浏览器中都会呈现良好的效果。我发现唯一的缺点是字体文件也被下载了两次。

你可以找到 西班牙语版本的这篇文章在我的网页


提交答案