让CSS3的@font-face字体在Windows上与ClearType兼容显示

Question

首先是一些背景信息。

似乎在任何浏览器上，使用 CSS3 @font-face 规则都会与 ClearType 字体渲染以出人意料和不受欢迎的方式进行交互，并且在 Windows 的任何版本（包括 XP 及以上版本）中都会存在这种情况。

当我遇到这种情况时，我最初将其记录为Google Font Directory bug。进一步的研究似乎会产生冲突的信息；启用或禁用 ClearType 可以帮助或损害 @font-face 字体在 Windows 中任何 Web 浏览器中的呈现。无论 ClearType 是否有帮助或有害，似乎完全取决于所使用的字体以及其中内置了什么样的提示。

例如，TypeKit 支持网站上的一个主题似乎指向了启用 ClearType 时的字体呈现问题。但是，开发了一个 jQuery 插件 来改善启用 ClearType 时的字体呈现，但该插件仅适用于 Internet Explorer。有趣的是，在插件演示页面上使用的字体在启用 ClearType 时呈现不佳，但当其被禁用时，两个演示页面的呈现完全相同/正确。

因此，考虑到所有这些背景信息和以前的研究，我的问题是：

无论 Windows ClearType 设置如何，确保现代浏览器在所有平台上都具有良好的字体呈现的最佳方法/折衷方案是什么？

我的第一个想法是使用默认包含@font-face字体的样式表。JavaScript可以检测用户的操作系统，如果检测到Windows，则可以编程方式修改样式表类以使用不包括@font-face字体的字体系列，从而使用系统本地回退字体。后来我意识到有人也想到了这个。尽管这种方法很巧妙，但它并不优雅。理想情况下，我希望我的网络字体可以在任何平台上使用，而不依赖于像sIFR或Cufon这样的东西。

有人有指针或更好的想法吗？

- segfault

---

我也患有同样的病症，目前还没有找到治愈方法... :) - Yoav Weiss

同样的问题和解决方案在这里，我还写了一篇博客文章，包含大量截图和解决方案。 - Sliq

Answer 1

这是一个严重问题，自2012年7月以来一直是Google Chrome的官方错误。在2013年8月，这个问题似乎在大多数情况下已经得到了解决。然而，仍有一些例子中字体看起来锯齿状和像素化。

解决方法：

给元素添加适当的文本描边：

// try around, find the setting that fits your font-size
webkit-text-stroke: 0.6px; 

// alternative RGBa syntax, allows finer settings with alpha-transparency
-webkit-text-stroke: 1px rgba(0, 0, 0, 0.1);

更多信息:

我已经写了一篇关于这个主题的大型博客文章，包括许多截图和4种不同的解决方案来解决此问题：请点击这里查看。

- Sliq

Answer 2

看一下关于几乎相同事情的这篇文章：IE7和8字体平滑处理：http://allcreatives.net/2009/12/05/smoother-font-face-embedding-in-ie-7-8/。评论中也有很多相关内容。最近我一直在寻找类似的支持，但并没有太大的收获。在某个项目中，我不得不使用Cufon，因为客户想要一个非常特别的字体。有时，sIFR和Cufon是唯一的解决方案，但老实说，我会避免使用sIFR。希望这能有所帮助。

- tadywankenobi

---

我发现无论使用哪个浏览器（甚至非IE浏览器），ClearType都会使我的自定义字体看起来很糟糕。 - BoltClock

我和BoltClock遇到了同样的问题。在我的原始帖子中，我链接到了allcreatives.net的另一个页面。虽然有一些hack方法可以让IE表现正常，但我对解决Windows中其他浏览器的方案很感兴趣。 - segfault

Answer 3

类似的问题在这里：Font-face embedded fonts look fuzzy in Windows 7 browsers得到了一个回答，这个问题也被解决了。

fontsquirrel字体生成器http://www.fontsquirrel.com/fontface/generator可以优化字体，并添加帮助Windows字体渲染引擎更好地呈现它们的提示/渲染信息。它还可以生成较小的文件，下载速度会更快。

- Yoav Weiss