精心渲染的webfont解决方案

Question

挑战：

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

故事：

所以我过去曾经使用过cufon或sifr，之后又放弃了@ font-face。在生产中使用@ font-face一段时间之后，我发现了一个可怕的发现。许多字体（大多数？）看起来像Windows XP中的垃圾，无论浏览器如何。即使在谷歌浏览器中，XP也会让字体呈现出令人难以接受的锯齿状和丑陋感。

我知道为什么会这样。在阅读了很多关于堆栈溢出的优秀帖子后，我明白问题不是字体提示，而是XP的clear-type设置为off是默认的。因此，无论应用程序如何，默认情况下所有字体都在XP中呈锯齿状。

所以...如果@ font-face在任何地方都能很好地工作但是XP有清晰类型关闭，并且仍然优于cufon我们应该做什么？

可能的解决方案：

• @ font-face默认情况下，Cufon用户代理嗅探Windows XP。 （目前正在使用，而且非常不喜欢它）
• @ font-face单独使用未知的强制清除类型的方法
• 单独的Cufon :(
• 另一个范例一起

解决方案失败：

• Adob​​e Typekit（在他们自己的网站上在XP中锯齿！，即使他们显示了光滑的标本jpeg）
• Google Webfonts（与XP相同的问题）
• @ font-face alone（与XP相同的问题）

到目前为止，Cufon无处不在，但只是糟透了，如果您要动画任何内容，或者希望在事后更新文本，则会提出额外的挑战。

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

Answer 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：我知道链接到我自己的博客不会在这里受到赞赏，但我认为我的帖子描述了这个问题的一个很好的解决方案，所以无论如何我发布了它。如果您要我删除链接，请发表评论，我会这样做。

Answer 2

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

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

Answer 3

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

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

（我在这里使用＆＃34; ttfautohint-0.95.tar.gz＆＃34;文件）：http://sourceforge.net/projects/freetype/files/ttfautohint/0.95/

您还应该查看文档，并且还需要安装MacPorts（或者在构建期间您将在终端中收到错误），但由于我的搜索分数阻止我发布两个以上的URL，您和＃39;我必须谷歌。

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

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

祝福。