如何在网页中实现字体抗锯齿？

Question

我一直在研究如何在网页上执行字体反锯齿。以下是我找到的一些解决方案：

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

此外，我发现这个网站gitorious.org在首页上使用非常漂亮的抗锯齿字体。但我不知道它是如何实现的。源代码显示它只是纯文本，但不能使用调试工具（如Firebug）进行更改。有人知道背后的技术是什么吗？或者还有其他方法来解决这个字体问题。

- Shiva Wu

---

Adobe也有一些抗锯齿字体。 - Jim

你看到的那个网站...使用纯粹和简单的图像来实现这种效果：http://gitorious.org/img/external/description.png（只是一个附言） - Frankie

Answer 1

可以采用此处所建议的方法，使用CSS属性text-shadow，示例如下：

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

- Jay

---

好的。+1 对这个答案。但颜色应该调整以匹配正在平滑处理的字体颜色。 - BasTaller

不错！非常聪明。谢谢你教我新东西 :-) - Andy Dvorak

Answer 2

没有一个好的跨平台方法可以强制客户端抗锯齿文本，这通常是有意为之的。客户端决定如何呈现文本，因为操作系统的图形能力差异很大，有些人可能希望禁用抗锯齿以提高性能（例如在旧版Windows XP系统上使用性能较弱的显卡）。

从12年以上的Web开发、可用性和用户界面经验来看，除非您有充分的理由要求在特定平台上使用平滑、抗锯齿字体，否则应该将文本渲染留给浏览器。大多数现代浏览器和操作系统都会对文本进行抗锯齿处理，所以这不应该是一个很大的问题。

至于Gitorious如何实现平滑字体，正如Frankie所提到的，他们在CSS中使用背景图像：

-HTML-

<h2>如果启用了CSS，没有人会看到这个文本。只有搜索引擎、屏幕阅读器和极客才会看到它！</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;
}

你为什么需要字体反锯齿呢？有特别的原因吗？

- Andy Dvorak

---

哦，这只是一张图片，我怎么会错过它呢？为什么还要添加纯文本呢？>< 没有特别的原因。只是个人爱好而已。 我更喜欢抗锯齿字体而不是其他方式。 - Shiva Wu

我同意这个答案，有些人可能会使用链接或Lynx来浏览网页，那么你的字体就无关紧要了。 - rapadura

Windows ClearType在像20px及以上这样的较大字体尺寸下效果非常糟糕，边缘变得非常锯齿化。灰度平滑会是更好的选择，但无论是Windows还是Mozilla都没有考虑这一点。在这种情况下，我真的想使用CSS来改善它。 - ygoe

同样的话也适用于浏览器中可以通过代码进行修改的任何内容。背景颜色、字体系列、链接颜色、图片、布局……最终，设计取决于设计师，基于客户的需求。无障碍问题很重要，但个人理念不应妨碍回答有关如何处理某事的问题。通过CSS/JS能够控制抗锯齿效果，有助于确保更多跨平台的一致性。 - Beejor

Answer 3

一些网站使用背景图像来呈现文本，并在标记中使用css text-indent：-9999;来放置文本。

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

- Daryl