Google Webfonts在Windows上的Chrome中呈现不稳定状态

一尘不染

Google Webfonts在Windows上的Chrome中呈现不稳定状态

css

我在我的网站上使用Google Webfonts服务，并且在很大程度上依赖它。它在大多数浏览器上都能正常显示，但是在Windows上的Chrome中，显示效果尤其糟糕。非常断断续续和像素化。

到目前为止，我发现Chrome需要先加载.svg格式的字体。但是，我使用的字体称为Asap，仅在.woff中可用。我使用免费的在线服务将其转换为.svg，但是当我将其添加到样式表中（.woff之前）时，它没有任何改变。

我也尝试过：

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

希望这两种方法都能帮助文本更流畅地呈现。

阅读 505

2020-05-16

共1个答案

一尘不染

Google终于在Chrome 37中本机修复了此问题！！！但是由于历史原因，我不会删除此答案。

问题
由于chrome实际上无法使用正确的抗锯齿渲染TrueType字体，因此造成了该问题。但是，chrome仍然可以很好地渲染SVG文件。如果您以woff上方的语法将对svg文件的调用上移，Chrome将下载svg并使用它而不是woff文件。您建议的一些技巧很有效，但仅适用于某些字体大小。

但是此错误是Chrome开发人员团队众所周知的，自2012年7月以来一直在修复。请在此处查看官方的错误报告线程：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');
}

2020-05-16