谷歌网络字体在Chrome呈现震荡在Windows(Google webfonts render c

我用我的网站上谷歌网络字体服务，并在很大程度上依赖于它。 它使得大多数浏览器很好，但在Chrome在Windows上它呈现特别糟糕。 非常不连贯和像素化。

什么到目前为止，我已经发现的是，Chrome需要的.SVG格式的字体被首先加载。 字体但是我使用，尽快叫，只是在.woff可用。 我将它转换使用免费的在线服务，.SVG，但是当我补充说，我的样式表（在.woff之前），它并没有改变任何东西。

我也试过：

-webkit-font-smoothing: antialiased;
text-shadow: 0px 0px 0px;

希望这些都会文本渲染更加流畅。

现在，我已经江郎才尽了，我会恨来改变字体。 有没有人有一个想法如何，我可以解决这个问题？ 我一直在使用Adobe Browserlab测试渲染，看到我怎么只有一台Mac。 该网站的链接是： www.symvoli.nl/about

提前致谢！

编辑2013年4月11日：

Chrome浏览器测试版35似乎也终于解决了这个问题：

Answer 1:

更新2014年8月

谷歌终于修复了在Chrome 37这个问题本身!!! 但是，由于历史的原因，我不会删除这个答案。

问题

创建该问题是因为铬实际上无法呈现的TrueType字体以正确的抗锯齿 。 然而，铬仍然呈现SVG文件好。 如果移动电话为您SVG在你的语法WOFF上面的文件了，Chrome将下载SVG和用它代替WOFF文件。 像你这样的一些技巧，提出工作得很好，但只能在特定的字体大小。

但这个错误是非常熟悉Chrome开发团队，并已经在固定自2012年7月在这里看到官方的bug报告线： https://code.google.com/p/chromium/issues/detail?id= 137692

更新2013年10月（感谢@ Catch22）

显然呈现SVG时，一些网站可能会遇到间歇间距的问题 。 因此，有一个更好的办法来剥皮。 如果调用针对Chrome媒体查询的SVG，间距问题就消失了：

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
      font-family: 'MyWebFont';
      src: url('webfont.svg#svgFontName') format('svg');
  }
}

第一种方法解决方案：

该Fontspring防弹语法修改为第一服务SVG：

@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot'); 
    src: url('webfont.eot?#iefix') format('embedded-opentype'),
         url('webfont.svg#svgFontName') format('svg'),
         url('webfont.woff') format('woff'),
         url('webfont.ttf')  format('truetype');
}

延伸阅读：

• 影响类型呈现CSS属性
• 更流畅的Web字体呈现在Chrome的Windows
• 如何防弹@字体面的Web字体

Answer 2:

-webkit-text-stroke: 0.5px;

用它只能在大的文本，因为它会影响到你的页面的性能。

Answer 3:

一个修复程序已在这里建议通过调用.svg文件第一， http://www.adtrak.co.uk/blog/font-face-chrome-rendering/

Answer 4:

我已经尝试了多种解决方案，终于想出了一个与不属于改变文件的顺序Chrome浏览器新版本的工作原理：

从本质上讲，我感动TTF文件到Mozilla的特定部分。

@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot'); 
    src: url('webfont.eot?#iefix') format('embedded-opentype'),
         url('webfont.svg#svgFontName') format('svg'),
         url('webfont.woff') format('woff');
}
@-moz-font-face {
    font-family: 'MyWebFont';    
    src: url('webfont.ttf')  format('truetype');
}

Answer 5:

由汤姆＆解答字体春天并没有为我做的某些原因。 此修复程序由山姆·戈达德做虽然：

尝试自己后，我碰到这似乎是针对此问题的得体，很容易解决跌跌撞撞。 看来，Chrome浏览器使用的@字体面对面套件的.svg文件，并且不喜欢被称为最后。 下面是标准的要求使用的CSS @字体面：

 // font-face inclusion @font-face { font-family: 'font-name'; src: url('path-to-font/font-name.eot'); src: url('path-to-font/font-name.eot?#iefix') format('eot'), url('path-to-font/font-name.woff') format('woff'), url('path-to-font/font-name.ttf') format('truetype'), url('path-to-font/font-name.svg') format('svg'); font-weight: normal; font-style: normal; } 

正如在本例中可以看出，.svg文件最后出现在所谓的URL列表。 如果我们修改代码到目标WebKit浏览器，然后告诉他们仅仅利用.svg文件。

// Usage
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: ‘font-name';
    src: url(‘path-to-font/font-name.svg’) format(‘svg’);
    }
}

Answer 6:

这可能仅仅是使用“尽快”不会呈现全部以及在特定大小的字体。 我改变了你的尺寸h1从3.5em至50px ，它看起来更好一点。 可能不是完美的解决方案，但我注意到，很多谷歌网络字体的可能是不可预测

Answer 7:

我开发的Firefox。 我的经验是，FF显示ttf字体非常好，没有任何额外的规则（超出@字体面要求的字体文件的URL）。 Chrome浏览器，但是，是一个不同的故事。 即使与-webkit-字体平滑：抗锯齿; 排除它仍然显示任何字体相当破烂。 Safari浏览器似乎不存在这样的问题，所以它不是天生的Webkit无法呈现的字体干净，这是一个Chrome的问题。

我还没有尝试过加入WebKit的文本行程：0.5px; 规则，而是意志。

答案上面我真的很喜欢汤姆Sarduy的答案最好。 除了这个问题的一个很好的说明，他给出了一个伟大的@ font-面堆叠使用覆盖所有主流浏览器。

Answer 8:

对于Web字体在Chrome渲染另一个链接参考 -

http://www.fontspring.com/blog/smoother-web-font-rendering-chrome

Answer 9:

有同样的事情的家伙。 好在除了铬所有的浏览器 - 即使IE10和9都很好。 Dreamwaeevr CS6还采用的fontsprings代码类似的版本，但在最后的SVG。 WOFF和TTF之前更改一轮SVG和所有在世界上是好的。 汤姆是居屋例如一鼓作气在那里，其实过去那种到你的代码和地图的路径，你需要的字体，你在企业里！

Answer 10:

看来，谷歌可能成为取决于浏览器和操作系统不同WOFF文件。

我发现，如果我从IE下载的字体，它是关于10K比，如果在Safari上完成从Mac为特定的字体更大。 43K VS 33K。 此外，IE版本似乎看在Mac上很好，但Mac版本似乎并没有在PC上正常工作。 Mac版本看起来在PC上的Mozilla Firefox中最糟糕的。

试试这个： http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,400italic,600italic

SourceSansPro-Regular.woff PC版27K

SourceSansPro-Regular.woff苹果版24K

Answer 11:

我已经试了很多办法： - 上下用字体面-webkit-字体平滑的SVG ...

后

-webkit-transform: rotate(-4.7deg) translate3d( 0, 0, 0);

该旋转是平滑的，但主要的问题处理不当了。

对我来说，溶液中加入：

-webkit-text-stroke: 0.5px;

Answer 12:

https://www.gettingthingstech.com/how-to-fix-jagged-font-rendering-in-google-chrome/

这篇文章介绍了一些关于谷歌铬合金的实验功能。 显然，启用“DisableWrite”选项可修复锯齿字体。 这显然是每台机器，而不是实施全面修复。

文章来源: Google webfonts render choppy in Chrome on Windows