Windows 7下Chrome上的Web字体呈现错误

Question

在Windows 7下使用Chrome浏览器上的Google网络字体时，字体似乎呈现错误，而在Mac OSX上（在Chrome，Safari和Firefox上），它看起来很不错。有没有办法通过CSS或HTML来阻止这种情况？

可以找到引入此行为的网站here（可能需要一段时间才能加载）。

以下是显示此内容的快照：

Answer 1

好的，这与Chrome在Windows中呈现字体的方式有关。您可以使用一种名为MacType的工具，它可以更改Windows用于渲染字体的渲染引擎。

您可以在此处下载：https://code.google.com/p/mactype/

从我研究过的所有东西，在Windows上使用谷歌网络字体，目前还没有办法解决这个问题。

它简单地通过设计如何运作。

您可以关注Chromium Google代码网站上的问题。 https://code.google.com/p/chromium/issues/detail?id=137692

继承了上述链接中的更多细节

  

据我所知：主要问题是Chrome继续存在   使用旧的Windows GDI来渲染字体，它看起来很糟糕。所有   其他现代浏览器（Opera除外）已切换到使用   Windows上的DirectWrite，导致更好的字体渲染，   让Chrome滞后。

     

如果你回顾一下旧版本的IE和Firefox，你会看到他们的   几年前的字体渲染与Chrome的完全相同   今天在Windows上。人们当时并没有注意到那么多   没有人使用网络字体;当你使用Arial，Verdana等时   看起来不错，因为这些字体经过精心设计和暗示   与GDI引擎配合良好。大多数网络字体都没有。

对于开发人员来说，一个解决方法就是将SVG放在第一位，但是怀疑这是正确的

-before--------------

@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;
}


-after--------------

@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.svg') format('svg'),
url('../../includes/fonts/chunk-webfont.woff') format('woff'),
url('../../includes/fonts/chunk-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

Answer 2

我找到了一些解决方案here，它对我有用

使用以下代码添加了临时修复程序...

$('body')
  .delay(500)
  .queue( 
    function(next){ 
        $(this).css('padding-right', '1px'); 
    }
  );