142

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

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

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

示例屏幕截图 #1

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

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

左边是谷歌浏览器，右边是firefox/internet explorer

示例屏幕截图 #2

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

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

左边是谷歌浏览器，右边是firefox/internet explorer

4

4 回答 4

163

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

最后，Chrome 团队将在 Chrome 37 中发布针对此问题的修复程序，该修复程序将于 2014 年 7 月向公众发布。请在此处查看当前稳定的 Chrome 35 和最新的 Chrome 37（早期开发预览）的示例比较：

在此处输入图像描述

问题状态，2013 年 12 月

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

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

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

我已经写了一篇关于这个问题的大型博客文章，请随意看看： 如何修复 Google Chrome 中丑陋的字体渲染

可重现的例子

看看今天在 Chrome 29 中最初问题的示例如何：

正面例子：

左：Firefox 23，右：Chrome 29

在此处输入图像描述

正面例子：

顶部：Firefox 23，底部：Chrome 29

在此处输入图像描述

反例：铬 30

在此处输入图像描述

反例：Chrome 29

在此处输入图像描述

解决方案

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

在此处输入图像描述

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

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

我为此发表了一篇博文：

如果您想了解此问题的最新信息，请查看相应的博客文章：如何修复 Google Chrome 中丑陋的字体渲染。如果有这方面的消息，我会发布消息。

我原来的答案：

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

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

错误报告评论中的官方声明：

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

于 2012-07-15T16:16:26.910 回答
46

我遇到了同样的问题，我在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');
  }
}

在此处输入图像描述

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

您可以在我的页面中找到这篇文章的西班牙语版本

于 2013-10-25T05:55:17.180 回答
22

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

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

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

于 2012-07-15T04:10:14.733 回答
14

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

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

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

于 2013-04-03T13:58:12.050 回答