如何在网页中进行字体反别名？

Question

我一直在研究如何在网页上执行字体反混叠。以下是我找到的一些解决办法：

• -webkit-font-smoothing属性:它似乎只在最新的浏览器上工作。
• Google:这很棒，而且很容易使用。我想知道如何脱机使用它。
• 是一个名为typeface.js:的javascript库，它用画布或VML绘制文本。看上去很棒，但我没有使用它。
• 也许css3支持这个。

此外，我发现这个网站，gitorious.org，在主页上使用非常漂亮的反字体。但我想知道它是怎么运作的。源代码显示它只是纯文本，但不能使用Firebug等调试工具进行更改。有谁知道这背后的原因吗？或者其他方法来解决这个字体问题。

​

Answer 1

实际上没有一种很好的跨平台方式来强迫客户端使用反别名文本，这通常是关键所在。客户端可以决定如何渲染文本，因为操作系统的图形功能差异很大，有些人可能希望禁用反混叠以提高性能(例如，在较旧的Windows系统中，图形卡不多)。

从12+多年的网络开发、可用性和用户界面体验来看，我建议，除非您有令人信服的理由要求在特定平台上使用平滑、反别名的字体，否则将文本呈现留给浏览器。大多数现代浏览器和OSes反别名文本无论如何，所以它真的不应该是一个很大的问题。

就像Frankie提到的那样，Gitorious是如何实现其流畅字体的，他们在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;
}

有什么特别的原因为什么你需要字体被反别名吗？

Answer 2

as suggested here的一种方法是使用CSS属性text-shadow，如下所示：

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

Answer 3

一些网站使用背景图像作为文本，并将文本放在带有css文本缩进：-9999的标记中；

另一种流行的方法是使用http://cufon.shoqolate.com/generate/