在 Windows 上使用 ClearType 使 CSS3 @font-face 字体渲染效果很好

Question

首先是一些背景信息。

似乎使用 CSS3 @font-face 规则可以在任何浏览器、任何版本的 Windows（XP 及更高版本）上以意想不到的方式与 ClearType 字体呈现交互。

当我遇到它时，我首先将其记录为Google Font Directory bug。进一步的研究似乎产生了相互矛盾的信息；启用或禁用 ClearType 可能有助于或损害 @font-face 字体在 Windows 中的任何 Web 浏览器中的呈现方式。 ClearType 是帮助还是伤害似乎完全取决于所使用的字体，以及其中内置的提示类型。

例如，thread on TypeKit's support site 似乎表明 ClearType 禁用时出现字体渲染问题。但是，开发了jQuery plug-in 以在启用 ClearType 时改进字体呈现，但该插件仅适用于 Internet Explorer。有趣的是，插件演示页面上使用的字体在启用 ClearType 时渲染效果不佳，但在禁用它时，两个演示页面的渲染相同/正确。

因此，鉴于所有这些背景信息和先前的研究，我的问题是：

无论 Windows ClearType 设置如何，确保在所有平台上为现代浏览器提供良好字体渲染的最佳方式/折衷方案是什么？

我的第一个想法是使用默认包含@font-face 字体的样式表。 JavaScript 可以检测用户的操作系统，如果检测到 Windows，可以通过编程方式修改样式表类以使用不包含 @font-face 字体的字体系列，从而使用系统原生的后备字体。后来我意识到，其他人也想到了this。不过，这是一个笨拙且不雅的解决方案。理想情况下，我希望我的网络字体无论平台如何都可以使用，而不依赖于 sIFR 或 Cufon 之类的东西。

有没有人有指点或更好的想法？

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 个不同的解决方案来解决这个问题：看看这里：

How to fix the ugly font rendering in Google Chrome

Answer 2

这里有一个类似的问题：Font-face embedded fonts look fuzzy in Windows 7 browsers 得到的答案为我解决了同样的问题。

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

Answer 3

查看这篇关于几乎相同内容的文章：

IE7 & 8 字体平滑：http://allcreatives.net/2009/12/05/smoother-font-face-embedding-in-ie-7-8/

在 cmets 中也有很多关于它的内容。我最近一直在寻找类似的支持，没有太多的快乐。我不得不在一个项目中使用 Cufon，因为客户想要一种非常特殊的字体。有时，sIFR 和 Cufon 是唯一的解决方案，但老实说，我会远离 sIFR。

希望这会有所帮助。