1

挑战：

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

故事：

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

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

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

可能的解决方案：

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

失败的解决方案：

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

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

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

4

3 回答 3

4

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

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

我写了一篇关于如何在 Pixels|Bytes 上创建网络字体的文章，其中解释了如何向字体添加提示以及如何在必要时使用我的 Font Smoothie 脚本启用 SVG 字体。希望这可以帮助 ：）

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

于 2013-02-19T09:50:32.917 回答
2

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

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

于 2012-05-28T18:55:22.623 回答
0

就我而言，我发现答案实际上并不集中在在 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，您必须使用 Google那。

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

I can only add that it's rather troublesome to build the ttfautohintGUI on OSX. You have to installed hundreds of MB of software, downloading from multiple locations too, just to build the GUI app. But once done, the app allows you easily to hint your @Font-Face fonts and resolve many WinXP display issues. Just be sure to tick "Windows Compatibility" in the GUI (it's unticked by default). I also unticked the "Add ttfautohintinfo" and "Pre-hinting" options, leaving everything else as their defaults. Click "Browse..." to add your Input File (the font you want to hint), and then copy and paste that path in the Output File, changing the filename to whatever you want it to be. You won't enable the "Run" button unless there is something in both the Input File and Output File fields.

最良好的祝愿。

于 2013-04-11T02:29:35.547 回答