我使用的是google webfonts，它们可以使用超大字体，但在18px时看起来很糟糕。我在这里和那里已经读到了一些用于字体平滑的解决方案，但是我还没有找到任何可以清楚地解释它的地方，而且我发现的一些代码片段根本不起作用。

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

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

示例屏幕＃1

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

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

屏幕截图示例2

此屏幕快照使用Typekit提供的webfonts在Adobe.com上显示了产品信息页面。在字体方面，Adobe＆Typekit是专业人士。

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

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

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

问题状态，2013年12月

1）有否妥善解决，通过加载字体时@import，<link href=或谷歌的webfont.js。问题在于Chrome浏览器只是从Google的API 请求.woff文件，而这些文件呈现出可怕的效果。令人惊讶的是，所有其他字体文件类型都呈现精美。但是，有一些CSS技巧可以“稍微平滑”渲染的字体，您将在此答案中找到更深的解决方法。

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

3.）Google Chrome开发人员团队致力于解决此问题。由于渲染引擎发生了数项巨大变化，因此显然正在进行中。

我已经写了一篇有关该问题的大型博客文章，随时查看： 如何在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，在注释中找到！谢谢！）

-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铬开发团队的声明

错误报告中的官方声明注释：

我们的Windows字体渲染正在积极研究中。...我们希望开发者可以在一个或两个里程碑之内开始尝试。一如既往，它变得稳定的速度与我们能够根除并消除任何回归的速度有关。

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

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

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

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

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

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

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

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

确保您的文本颜色和上部text-stroke-width必须相同，仅此而已。

我首先要说的是，这并不总是可行的，我已经用sans-serif诸如此类的字体和外部字体对此进行了测试open sans

有时，当你用巨大的字体，尽量接近，以font-size:49px和上

这是一个大小为48px的标题文本（font-size:48px;在包含文本的元素中）。

但是，如果您将48px向上font-size:49px;（以及50px，60px，80px等），则会发生一些有趣的事情

文字自动变平滑，看起来真的很好

另一方面

如果您正在寻找小字体，可以尝试一下，但是效果不是很好。

对于文本的父项，只需应用下一个css属性： -webkit-backface-visibility: hidden;

您可以转换如下内容：

对此：

（字体为Kreon）

考虑一下，当您不放置该属性时，它-webkit-backface-visibility: visible;是继承的

但是请注意，这种做法不会总是带来良好的效果，如果仔细看，Chrome只会使文本看起来有点模糊。

另一个有趣的事实：

-webkit-backface-visibility: hidden;当您在Chrome浏览器中转换文本（具有-webkit-transform包括旋转，倾斜等的属性）时，也可以使用

不带 -webkit-backface-visibility: hidden;

用 -webkit-backface-visibility: hidden;

好吧，我不知道为什么这种做法行得通，但对我来说却行得通。 对不起，我的英语很古怪。