12

首先是一些背景信息。

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

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

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

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

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

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

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

4

3 回答 3

3

这是一个大问题，并且是自 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 种不同的解决方案来解决这个问题：看看这里：

如何修复 Google Chrome 中丑陋的字体渲染

于 2013-08-30T15:05:18.013 回答
2

看看这篇关于几乎同样事情的文章：

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

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

希望这可以帮助。

于 2011-02-23T10:14:50.943 回答
2

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

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

于 2012-07-20T11:45:02.743 回答