html – 如何在网页中做字体抗锯齿？

我一直在研究如何在网页上执行字体反锯齿.这里有一些我发现的解决方案：

> -webkit-font-smoothing属性：它似乎只适用于最新的浏览器.我没有尝试过.
> Google Font API：这是非常好的,易于使用.我不知道如何使用它离线.
>一个名为typeface.js的javascript库：用canvas或VML绘制文本.看起来不错,但我没有使用它.
>也许css3支持这个.

此外,我发现这个网站,gitorIoUs.org,在首页上使用非常漂亮的抗锯齿字体.但我不知道它是如何工作的.源代码显示它只是纯文本,但不能使用Firebug等调试工具进行更改.有谁知道这是什么？或者等一下来解决这个字体问题.

解决方法

实际上并没有一个很好的跨平台的方式来强制客户反对别的文字,这一般是重要的.客户端可以决定如何渲染文本,因为操作系统的图形功能差异很大,有些人可能希望禁用抗锯齿功能,以提高性能(例如,在较旧的Windows XP系统上使用微软的显卡).

从12年的Web开发,可用性和用户界面体验,我建议,除非你有一个令人信服的理由要求平滑的反锯齿字体在特定的平台上,留下文本渲染到浏览器.大多数现代浏览器和操作系统的反锯齿文字,所以真的不应该是一个很大的交易.

至于Goryory如何实现其流畅的字体,如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;
}

有什么特别的原因,你需要字体是反锯齿的？