渲染良好的 webfont 解决方案答案

【问题标题】：Well rendered webfont solution渲染良好的 webfont 解决方案
【发布时间】：2015-04-29 18:07:12
【问题描述】：

挑战：

提供可在所有主要浏览器、设备和操作系统上可接受的动态网络字体

故事：

所以我过去曾使用过 cufon 或 sifr，但后来放弃了两者，转而使用 @font-face。在生产环境中使用@font-face 一段时间后，我有了一个可怕的发现。无论浏览器如何，许多字体（大多数？）在 Windows XP 中看起来都像废话。即使在 google chrome 中，XP 也会使字体呈现出令人无法接受的锯齿状和丑陋。

我知道为什么会这样。在阅读了许多关于 ye olde stack overflow 的优秀帖子后，我明白问题不在于字体提示，而是 XP 将 clear-type 设置为默认值。因此，无论应用程序如何，XP 中的所有字体都默认为锯齿状。

所以...如果@font-face 在任何地方都很好用，但是 XP 关闭了 clear-type，并且仍然优于 cufon，我们应该怎么做？

可能的解决方案：

@font-face 作为默认值，Cufon 带有用于 windows XP 的用户代理嗅探。（目前正在使用，非常不喜欢）
@font-face 单独使用强制清除类型的未知方法
单独使用Cufon :(
另一种范式结合在一起

失败的解决方案：

Adobe Typekit（在他们自己的网站上的 XP 中出现锯齿状！，即使它们显示的是平滑的 jpeg 样本）
Google Webfonts（与 XP 相同的问题）
@font-face 单独（与 XP 相同的问题）

到目前为止，Cufon 可以在任何地方使用，但很糟糕，如果您要为任何内容制作动画，或者希望在事后更新文本，这会带来额外的挑战。

您有完全跨浏览器和跨操作系统的解决方案吗？处理这个问题的最佳方法是什么？

【问题讨论】：

即使在 Windows 上没有启用 ClearType 的情况下，许多系统字体也会出现锯齿状且外观不佳。除了以 XP（企业？）为主的用户群之外可能，最好忘记非 ClearTypers。他们是一个不断缩小的少数群体。
嗯...我知道系统字体也存在锯齿状质量。你有关于非 ClearTypers 的统计数据吗？ neowin.net/news/… Windows XP 仍然是主导操作系统，我如何确定？

标签： windows-xp font-face sifr cufon webfonts

【解决方案1】：

我很确定看起来很难看的网络字体缺少一些提示（编辑：不，即使仍然需要提示才能使字体在 Windows 上看起来不错，这里真正的问题是在 XP 中禁用了 ClearType。但是，无论如何，这个答案都有解决方案）。

与其他操作系统上的字体渲染器不同，Windows 引擎依赖于字体附带的提示信息。如果提示缺失、损坏或损坏，字体会看起来很丑 - 就这么简单。幸运的是，有一种方法可以使用ttfautohint 向 ttf 字体添加一些自动生成的提示。添加提示后，您可以从增强的 TTF 生成所需的不同 Web 字体格式（eof、woff 等）。此外，如果字体平滑功能被禁用，您应该尝试使用 SVG 字体，因为它们总是使用抗锯齿渲染。

我写了一个article on how to create web-fonts on Pixels|Bytes，它解释了如何为字体添加提示以及如何在必要时使用my Font Smoothie script 启用SVG 字体。希望这会有所帮助:)

PS：我知道链接到我自己的博客在这里不会受到赞赏，但我认为我的帖子描述了一个很好的解决问题的方法，所以我还是发布了它。如果您希望我删除链接，请留下评论，我会这样做。

【讨论】：

我相当肯定提示没有帮助，但看看你所做的一些命令行更改，我很怀疑。让我根据你的建议用 ttf 提示测试一些东西。
我什至有一些字体已经从设计师那里得到了很好的暗示，但无论如何看起来都很难看。使用 ttfautohint 也修复了这些问题，因此它也有可能在这里有所帮助。我很好奇你的测试结果...
我花了一些时间，但我终于找到了一种通过使用 SVG 字体来强制字体平滑的方法。我还编写了一个小脚本（基于the User Agent Man code），如果禁用字体平滑，它会自动切换到 SVG 字体。 my updated blog post 中的其他所有内容。
嗯……不客气。我花了一段时间来测试。我放弃了对 ie7-8 的支持，所以这个问题真的不再影响我了。
IE8 对我来说从来都不是问题。需要修复的是 Chrome 和 Opera。

【解决方案2】：

http://www.useragentman.com/blog/2009/11/29/how-to-detect-font-smoothing-using-javascript/

这是我迄今为止发现的作品。该解决方案检测锯齿状字体，因此我们可以执行以下操作：@font-face 作为标准，Cufon 作为后备。

【讨论】：

【解决方案3】：

在我的例子中，我发现答案确实不实际上集中在在 WinXP 中启用 Clear Type。无论是启用还是禁用 Clear Type，我发现我的一些 @font-face 英文字体（尤其是 BLACK、SANS-SERIF）在 IE7 和 IE8 中看起来很糟糕。有时不仅仅是锯齿状或抗锯齿效果不佳。我看到的一个大问题是字体本身的形状（一些字体，不是全部）似乎挤成一些很不吸引人的东西。我按照 Torben 的建议找到了一个可以接受的解决方案。我只需要字体提示，而且该解决方案与启用清除类型无关。要启动并运行字体提示应用程序，请阅读此处的说明：

https://gist.github.com/davelab6/3783491

（我在这里使用了“ttfautohint-0.95.tar.gz”文件）：http://sourceforge.net/projects/freetype/files/ttfautohint/0.95/

您还应该查看文档，并且您还需要安装 MacPorts（否则您会在构建期间在终端中收到错误），但由于我的代表分数阻止我发布两个以上的 URL，您'将不得不谷歌。

更好的提示并不意味着您的@font-face 字体现在在 WinXP 中的 IE 上看起来像在 Macintosh 浏览器上一样完美流畅和出色。但我发现字体提示可以防止 IE7 和 IE8 中某些字体的形状出现令人讨厌的扭曲。对我来说，这是一个可以接受的解决方案。

我只能补充一点，在 OSX 上构建 ttfautohintGUI 相当麻烦。您必须安装数百 MB 的软件，还要从多个位置下载，才能构建 GUI 应用程序。但是一旦完成，该应用程序允许您轻松提示您的@Font-Face 字体并解决许多 WinXP 显示问题。只需确保在 GUI 中勾选“Windows 兼容性”（默认情况下未勾选）。我还取消了“添加 ttfautohintinfo”和“预提示”选项，将其他所有内容保留为默认值。单击“浏览...”以添加您的输入文件（您想要提示的字体），然后将该路径复制并粘贴到输出文件中，将文件名更改为您想要的任何名称。除非输入文件和输出文件字段中都有内容，否则您不会启用“运行”按钮。

最好的祝愿。

【讨论】：