html - 为什么 Google 的开放字体示例与我在同一浏览器中实现它们时看起来不同？

Question

例如，看一下 http://www.google.com/webfonts/specimen/Open+Sans .检查类型，将字体大小更改为更小的值，例如 12px。现在，当我在自己的网站上(在同一浏览器中，即 Windows 7 上的 Firefox 10)实现这种字体时，它的边缘渲染效果很差。我可以让字体在 11px、13px、15px 等时看起来更好(但不是真的可以接受)，但在上面的链接中，字体在所有这些尺寸以及 12px、14px 等甚至尺寸下看起来都很完美。

我已经搜索了他们的代码以寻找某种“渲染意图”规则或类似的东西，但我就是看不到它。他们到底是怎么让所有字体看起来都这么好看的，甚至在 Windows 浏览器上也是如此？

编辑:这是我插入到 Google 字体预览中的一些文本:http://imgur.com/3eWUV以及我自己的 HTML 页面中样式相同的元素:http://imgur.com/QKNMp

“g”、“i”中的点以及几乎所有字母的渲染效果都非常差。

Answer 1

请查看页面http://www.cs.tut.fi/~jkorpela/test/open-sans.html在您的浏览器上。它使用 Google 推荐的编码在简单的环境中测试 Open Sans。 12 像素大小的白底黑字和白底灰字在我的 Firefox 上看起来都很正常。如果它们对您来说也不错，那么问题出在您页面上的一些附加代码中。在这种情况下，请发布仍然会出现您所看到的问题的最小案例的代码或 URL。