如何在网页中进行字体抗锯齿？

Question

我一直在研究如何在网页上执行字体抗锯齿.以下是我发现的一些解决方案:

• -webkit-font-smoothing属性:它似乎只适用于最新的浏览器.我没试过.
• Google Font API:这很棒,而且易于使用.我想知道如何离线使用它.
• 一个名为typeface.js的javascript库:用canvas或VML绘制文本.看起来很棒,但我没有使用它.
• 也许css3支持这个.

此外,我发现这个网站gitorious.org在主页上使用了非常漂亮的防眩字体.但我想知道它是如何运作的.源代码显示它只是纯文本,但无法使用Firebug等调试工具进行更改.有谁知道这背后是什么？或者其他方面来解决这个字体问题.

Answer 1

这里建议的一种方法是使用CSS属性text-shadow,如下所示:

text-shadow: 0 0 1px rgba(51,51,51,0.5);

Answer 2

没有一种很好的跨平台方式来强制客户端使用反别名文本,这通常就是重点.客户端决定如何呈现文本,因为操作系统的图形功能差别很大,有些人可能希望禁用抗锯齿以提高性能(例如,在具有笨重图形卡的旧Windows XP系统上).

从12年以上的Web开发,可用性和用户界面经验来看,我建议除非你有一个令人信服的理由要求在特定平台上使用平滑,消除锯齿的字体,否则请将文本呈现留给浏览器.大多数现代浏览器和操作系统无论如何都是反别名文本,所以它真的不应该是一个非常大的问题.

至于Gitorious如何实现其流畅的字体,正如Frankie所说,他们在CSS中使用背景图像:

-HTML-

<h2>Nobody will ever see this text if they have CSS enabled. Only search engines, screen readers, and nerds will ever see it!</h2>

-CSS-

#header #introduction h2 {
    background: url(http://gitorious.org/img/external/header.png) no-repeat;
    height: 74px;
    text-indent: -9999px; /* hide text off-screen */
    width: 447px;
}

是否有任何特殊原因需要字体消除锯齿？