windows - 使 CSS3 @font-face 字体渲染在 Windows 上与 ClearType 兼容

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 .虽然这是一个 hacky 和不优雅的解决方案。理想情况下，我希望我的网络字体可以在任何平台上使用，而不依赖于 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