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

Question

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

介绍此行为的网站可以找到here (加载可能需要一段时间)。

这是显示此情况的快照:

Answer 1

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

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

根据我研究的所有内容，Windows 上的 google 网络字体目前不存在解决此问题的方法。

它的工作原理很简单。

您可以在 Chromiums Google Code 网站上关注该问题。 https://code.google.com/p/chromium/issues/detail?id=137692

这是上面链接的一个片段，其中包含更多详细信息

As I understand it: the main problem is the fact that Chrome continues to use the old Windows GDI for rendering fonts, and it looks poor. All other modern browsers (except Opera) have switched to using DirectWrite on Windows, resulting in much better font rendering, leaving Chrome lagging.

If you look back at older versions of IE and Firefox you'll see their font rendering a few years ago looked exactly the same as Chrome's does today on Windows. People just didn't notice as much back then as nobody was using web fonts; when you're using Arial, Verdana etc they look OK because those fonts have been carefully designed and hinted to work well with the GDI engine. Most web fonts have not.

对于开发人员来说，一种解决方法是将 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;
}