css – Google网络字体在Windows上的Chrome中呈现断续

前端之家收集整理的这篇文章主要介绍了css – Google网络字体在Windows上的Chrome中呈现断续前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我使用我的网站上的Google Webfonts服务,并严重依赖它。它在大多数浏览器上呈现正常,但在Windows上的Chrome中,它呈现的特别糟糕。非常破碎和像素化。

我发现到目前为止,Chrome需要首先加载.svg格式的字体。我使用的字体,称为Asap,只有.woff可用。我使用免费在线服务将其转换为.svg,但当我添加到我的样式表(.woff之前),它没有改变任何东西。

我也试过:

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

希望或者将帮助文本呈现更顺利。

现在我已经用完了想法,我会讨厌改变字体。有没有人有一个想法我如何可以解决这个问题?我一直在使用Adobe Browserlab来测试渲染,看看我如何只有一个mac。链接到网站是:www.symvoli.nl/about

提前致谢!

编辑:2013年4月11日:

Chrome 35 Beta似乎终于解决了这个问题:

解决方法

2014年8月更新

Google finally fixes this issue in Chrome 37 natively!!!. But for historical reasons I won’t delete this answer.

问题

由于chrome实际上无法使用正确的抗锯齿渲染TrueType字体,因此会创建该问题。然而,chrome仍然渲染SVG文件。如果你移动你的svg文件调用在你的语法上面的woff,chrome将下载svg并使用它而不是woff文件。像你的一些技巧建议工作,但只有某些字体大小。

但是这个bug是Chrome开发者团队非常熟知的,并且自2012年7月以来一直在修复。请参见官方错误报告线程在这里:https://code.google.com/p/chromium/issues/detail?id=137692

更新2013年10月(感谢@ Catch22)

显然,一些网站在渲染svg时可能会出现间歇性间隔问题。所以有一个better way到皮肤它。如果您使用特定于Chrome的媒体查询调用svg,间距问题就会消失:

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

第一种方法解决方案:

修改Fontspring bulletproof语法以首先提供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 properties that affect type rendering
> Smoother Web Font Rendering in Chrome for Windows
> How to Bulletproof @font-face Web Fonts

猜你在找的CSS相关文章