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

【问题标题】：How to do font antialiasing in web page?如何在网页中进行字体抗锯齿？
【发布时间】：2011-08-04 17:28:02
【问题描述】：

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

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

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

【问题讨论】：

adobe 也有一些抗锯齿字体。
你看到的那个网站......使用纯图像来实现这种效果：gitorious.org/img/external/description.png（只是一个附录）

标签： html css

【解决方案1】：

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

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

【讨论】：

好。 +1 这个答案。但是颜色应该调整以匹配被平滑字体的字体颜色。
整洁！非常聪明。谢谢你教我一些新东西:-)

【解决方案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;
}

您需要字体消除锯齿有什么特别的原因吗？

【讨论】：

哦，这只是一张图片，我怎么错过了？为什么它还添加了纯文本呢？ ~~>
我同意这个答案，例如有人可能会使用链接或 lynx 来冲浪，那么无论如何你的字体都无关紧要。
Windows ClearType 在较大的字体（如 20 像素或更大）下惨遭失败。边缘变得非常锯齿状。灰度平滑在这里会是更好的选择，但 Windows 和 Mozilla 都没有想到它。在这种情况下，我真的很想使用 CSS 来改变它。
浏览器中任何可以用代码修改的东西都可以这样说。背景颜色、字体系列、链接颜色、图像、布局……最终，设计取决于设计师，基于客户的需求。可访问性问题很重要，但个人哲学不应妨碍回答某人关于如何做某事的问题。能够通过 CSS/JS 控制抗锯齿有助于确保更多的跨平台一致性。

【解决方案3】：

一些网站使用背景图片作为文本，并将文本放在带有 css text-indent:-9999 的标记中；

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

【讨论】：