使用CSS3 @ font-face字体渲染在Windows上使用ClearType可以很好地使用

Question

首先是一些背景信息.

似乎使用CSS3 @ font-face规则可以在任何浏览器,任何版本的Windows(XP及更高版本)上以意外和不受欢迎的方式与ClearType字体renderv进行交互.

当我遇到它时,我首先将此记录为Google Font Directory错误.进一步的研究似乎产生相互矛盾的信息; 启用或禁用ClearType可以帮助或损害@ font-face字体在Windows中的任何Web浏览器中呈现的方式.ClearType是帮助还是伤害似乎完全依赖于所使用的字体,以及它们内置了什么样的提示.

例如,当ClearType为DISABLED时,TypeKit支持站点上的线程似乎指向字体呈现问题.但是,当ClearType为ENABLED时,开发了一个jQuery插件来改进字体呈现,但该插件仅适用于Internet Explorer.有趣的是,插件的演示页面上使用的字体在启用ClearType时渲染效果很差,但是当它被禁用时,两个演示页面的渲染方式相同/正确.

因此,鉴于所有背景信息和先前的研究,我的问题是:

无论Windows ClearType设置如何,在所有平台上为现代浏览器确保适当的字体呈现的最佳方式/妥协是什么？

我的第一个想法是默认使用包含@ font-face字体的样式表.JavaScript可以检测用户的操作系统,如果检测到Windows,可以通过编程方式修改样式表类,以使用不包含@ font-face字体的字体系列,以便使用系统本机回退字体.我后来意识到别人也想到了这一点.虽然这是一个hacky和不优雅的解决方案.理想情况下,我希望我的网络字体无论平台如何都可以使用,而不依赖于像sIFR或Cufon这样的东西.

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

Answer 1

这是一个大问题，是 Google Chrome 自 2012 年 7 月以来的一个官方错误。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 中难看的字体渲染