谷歌浏览器中是否有任何“字体平滑”？

Question

我正在使用 google webfonts，它们在超大字体大小上很好，但在 18px 时，它们看起来很糟糕。我在这里和那里读到有字体平滑的解决方案，但我没有找到任何可以清楚解释它的地方，而且我发现的几个 sn-ps 根本不起作用。

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

谁能指出我正确的方向？也许您知道可以清楚地解释这一点的资源？谢谢！

示例屏幕截图 #1

此屏幕截图显示了https://www.dartlang.org/ 的主页，这是一种由 Google 制作的编程语言（因此我们可以暗示该网站也是由 Google 构建的）并使用 Google Webfonts。

屏幕截图显示左侧是 Google Chrome，右侧是 Firefox/Internet Explorer。：

示例屏幕截图 #2

此屏幕截图显示了 Adob​​e.com 上的产品信息页面，使用的是 Typekit 提供的网络字体。 Adobe 和 Typekit 在字体方面是专业人士。

屏幕截图显示右侧为 Google Chrome，左侧为 Firefox/Internet Explorer：

Answer 1

问题状态，2014 年 6 月：已在 Chrome 37 中修复

最后，Chrome 团队 will release a fix 解决了 Chrome 37 的这一问题，该问题将于 2014 年 7 月向公众发布。请在此处查看当前稳定的 Chrome 35 和最新的 Chrome 37（早期开发预览）的示例比较：

问题状态，2013 年 12 月

1.) 通过@import、<link href= 或谷歌的webfont.js 加载字体时有NO正确的解决方案。问题是 Chrome 只是从 Google 的 API 请求 .woff 文件，这些文件呈现得很糟糕。令人惊讶的是，所有其他字体文件类型都呈现精美。但是，有一些 CSS 技巧可以稍微“平滑”渲染的字体，您会在这个答案中找到更深层次的解决方法。

2.) 自托管字体时有一个真正的解决方案，首先由 Jaime Fernandez 在此 Stackoverflow 页面上的另一个答案中发布，通过在其中加载网络字体来解决此问题一个特殊的命令。简单地复制他的出色答案我会感觉很糟糕，所以请在那里看看。还有一个（未经证实的）解决方案建议仅使用 TTF/OTF 字体，因为它们现在几乎所有浏览器都支持。

3.) Google Chrome 开发人员团队致力于解决该问题。由于渲染引擎已经发生了几处巨大的变化，因此显然有些事情正在进行中。

我已经写了一篇关于这个问题的大型博客文章，请随意看看： How to fix the ugly font rendering in Google Chrome

可重现的例子

查看最初问题中的示例在 Chrome 29 中的外观：

正面例子：

左：Firefox 23，右：Chrome 29

正面例子：

顶部：Firefox 23，底部：Chrome 29

反例：Chrome 30

反例：Chrome 29

解决方案

用-webkit-text-stroke修复上面的截图：

第一行是默认的，第二行是：

-webkit-text-stroke: 0.3px;

第三行有：

-webkit-text-stroke: 0.6px;

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

-webkit-text-stroke: 0.Xpx;

或 RGBa 语法（由 nezroy 提供，在 cmets 中找到！谢谢！）

-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);

我为此发表了一篇博文：

如果您想了解此问题的最新信息，请查看相应的博客文章：How to fix the ugly font rendering in Google Chrome。如果有这方面的消息，我会发布消息。

我原来的回答：

这是 Google Chrome 中的一个大错误，Google Chrome 团队确实知道这一点，请参阅官方错误报告 here。目前，在 2013 年 5 月，即使在报告该错误 11 个月后，也没有解决。奇怪的是，唯一搞乱 Google Webfonts 的浏览器是 Google 自己的浏览器 Chrome（！）。但是有一个简单的解决方法可以解决问题，请参阅下面的解决方案。

2013 年 5 月 Google Chrome 开发团队的声明

错误报告cmets官方声明：

我们的 Windows 字体渲染正在积极进行中。 ...我们希望在开发人员可以开始使用的一两个里程碑中拥有一些东西。与往常一样，它达到稳定的速度取决于我们能够以多快的速度根除和消除任何回归。

Answer 2

我也遇到了同样的问题，在this post of Sam Goddard找到了解决方法，

两次定义字体调用的解决方案。首先是推荐的，用于所有浏览器，在特定调用后仅用于具有特殊媒体查询的 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');
  }
}

使用此方法，字体将在所有浏览器中呈现良好。我发现唯一的缺点是字体文件也下载了两次。

您可以找到spanish version of this article in my page

Answer 3

Chrome 不会像 Firefox 或任何其他浏览器那样呈现字体。这通常是仅在 Windows 上运行的 Chrome 中的问题。如果你想让字体平滑，可以像这样在你的h4 标签上使用-webkit-font-smoothing 属性。

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

您也可以使用subpixel-antialiased，这将为您提供不同类型的平滑（使文本有点模糊/阴影）。但是，您需要一个夜间版本才能看到效果。您可以了解更多关于字体平滑的信息here。

Answer 4

好的，你可以简单地使用它

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

确保您的文本颜色和上部文本笔划宽度必须与我相同，仅此而已。