有没有在谷歌浏览器的任何“字体平滑”？(Is there any “font smoothing”

我使用谷歌网络字体，他们在精超大字体大小，但在18像素，它们看起来很糟糕。 我已经在这里和那里读，有对字体平滑的解决方案，但我还没有发现任何地方，清楚地说明了这一点，我已经找到了一些片段不会在所有的工作。

我h4看起来几乎每一个浏览器可怕的，而Chrome是最糟糕的。 在Chrome中，几乎所有我的字体看起来可怕。

任何人都可以点我在正确的方向？ 也许你知道，清楚地解释这个资源呢？ 谢谢！

示例屏幕截图＃1

该截图显示的网页https://www.dartlang.org/ ，由谷歌做了一个编程语言（所以我们可以暗示该网站还通过谷歌建立），并使用谷歌网络字体。

屏幕截图显示在左边，在右边的Firefox / Internet Explorer的谷歌浏览器：

示例屏幕截图＃2

该截图显示Adobe.com上一个产品信息页面，使用Typekit提供网络字体。 的Adobe＆Typekit是专业人士，当涉及到的字体。

屏幕截图显示在右边，左边的Firefox / Internet Explorer的谷歌浏览器：

Answer 1:

这个问题的现状，2014年6月：修正了Chrome 37版

最后，Chrome团队将发布一个修复与Chrome 37版在这里这个问题将在当前稳定的Chrome 35和最新的Chrome 37（前期开发预览）的2014年7月见例相比被发布给公众：

这个问题，2013年12月的情况

1.）有经由加载字体时没有适当的溶液@import ， <link href=或谷歌的webfont.js 。 问题是，浏览器简单地从谷歌的API，它使可怕的请求.woff文件。 令人惊讶的所有其他字体文件类型呈现精美。 不过，也有一些CSS技巧，将“平滑”的字体呈现一点点，你会发现解决办法（收费）这个答案更深。

2）有这个一个真正的解决方案时，自托管的字体，先贴由杰米·费尔南德斯在本页面＃1上的另一个答案，即通过在一个特殊的顺序加载网页字体修复此问题。 我会心疼简单地复制他的出色答卷，那么请看看那里。 另外还有一点建议只使用TTF / OTF字体，因为他们现在几乎所有的浏览器都支持的（未经证实）解决方案。

3）谷歌Chrome开发团队的工作在这个问题上。 由于那里的渲染引擎已经几个巨大的变化有明显的事正在进行中。

我已经写了关于这个问题的一个大的博客文章，随便看看： 如何解决谷歌浏览器的丑陋的字体渲染

Reproduceable例子

请参阅从最初的问题的例子怎么看今天，在Chrome 29：

正面的例子：

左：火狐23，右：铬29

正面的例子：

上图：火狐23，底部：铬29

反面教材：铬30

反面教材：铬29

解

固定与-webkit-文本冲程上面的截图：

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

-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（碧玉埃斯佩霍的博客中找到）：

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

我做了一个博客帖子上这样的：

如果你想在这个问题上进行更新，对根据博客文章一看： 如何解决谷歌浏览器的丑陋字体渲染 。 如果对这个是有消息我会发布消息。

我原来的答复：

这是一个很大的错误在谷歌Chrome和谷歌Chrome团队不知道这一点，看官方的bug报告在这里 。 目前，2013年5月，该错误报道甚至后11个月，它没有解决。 这是一个奇怪的事情，这打乱了谷歌网络字体的唯一浏览器是谷歌自己的浏览器Chrome的（！）。 但有一个简单的解决方法，这将解决这个问题，请参阅下面的解决方案。

声明要从Google Chrome开发团队，2013年5月

官方声明中错误报告的意见：

我们的Windows字体渲染积极地处理。 ......我们希望能有一个里程碑或两个开发人员可以开始玩的东西之内。 如何快速去稳定还是一如既往的，所有关于我们怎么快速铲除和烧毁任何退步。

Answer 2:

我有同样的问题，我发现在解决这个帖子山姆戈达德的 ，

该解决方案如果所定义的呼叫到字体两次 。 首先因为它是建议，用于所有的浏览器，并配有专用媒体查询特定的呼叫只为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');
  }
}

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

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

Answer 3:

Chrome浏览器不会呈现如Firefox或任何其他浏览器的字体。 这通常只能在Windows上运行在Chrome浏览器的问题。 如果你想使字体平滑，使用-webkit-font-smoothing揭掉财产h4这样的标签。

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

您还可以使用subpixel-antialiased ，这会给你不同类型的平滑（使文字有点模糊/阴影）。 但是，您将需要一个nightly版本，看看效果。 您可以了解更多关于字体平滑这里 。

Answer 4:

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

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

确保你的文本颜色和上面的文本冲程宽度必须同我，就是这样。

Answer 5:

我会说之前的所有， 这不会总是工作 ，我有测试此sans-serif字体和外部字体像open sans

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

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

但是，如果您在48像素到font-size:49px; （和50像素，60像素，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;

好了，我不知道为什么练习的作品，但它确实对我来说。 对不起，我的英语怪异。

文章来源: Is there any “font smoothing” in Google Chrome?