google-chrome - 在 Windows 7 下的 Chrome 上的网页字体渲染有缺陷

Question

在 Windows 7 下的 Chrome 上使用 Google Web Fonts 时，字体似乎呈现不正确，而在 Mac OSX（在 Chrome、Safari 和 Firefox 上）上看起来很好。有没有办法通过 CSS 或 HTML 来防止这种情况发生？

可以在此处找到介绍此行为的站点（加载可能需要一段时间）。

这是显示此内容的快照：

Answer 1

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

你可以在这里下载：https ://code.google.com/p/mactype/

从我研究过的所有内容来看，在 Windows 上使用谷歌网络字体目前不存在解决此问题的方法。

它只是通过设计它是如何工作的。

您可以在 Chromiums Google Code 网站上关注该问题。 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

我在 这里找到了一些解决方案 ，它对我有用

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

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