如何在网页中进行字体反锯齿？ [英] How to do font antialiasing in web page?

问题描述

我一直在努力如何在网页上执行字体反锯齿。以下是我发现的一些解决方案：

I've been working on how to perform font anti aliasing on web pages. Here're some solutions I found:

• -webkit-font-smoothing 属性：它似乎只在最新的浏览器上工作。我没有尝试。


• Google Font API：这是伟大的，易于使用。我不知道如何离线使用它。


• 一个名为typeface.js的javascript库：用canvas或VML绘制文本。看起来不错，但我未能使用它。


• 也许css3支持这个功能。

• -webkit-font-smoothing attribute: It seems to work only on the newest browsers. I didn't try it out.
• Google Font API: this is great, and easy to use. I wonder how to use it offline.
• A javascript library called typeface.js: which draw the text with canvas or VML. Looks great, but I failed to use it.
• Maybe css3 supports this.

，我发现这个网站，gitorious.org，在主页上使用非常漂亮的抗锯齿字体。但我不知道它是如何工作的。源代码显示它只是纯文本，但不能使用调试工具，如Firebug更改。有没有人知道这背后是什么？

Also, I found this website, gitorious.org, uses very beautiful antialising fonts on the homepage. But I wonder how it worked. The source code shows it's just plain text, but cannot be changed using debugging tools such as Firebug. Does any one know what is behind this? Or someway else to work around this font problem.

推荐答案

没有一个很好的跨平台方法强制客户端反对别名文本，这通常是点。客户端决定如何渲染文本，因为操作系统的图形功能差异很大，有些人可能希望禁用抗锯齿以提高性能（例如，在具有微弱显卡的较旧的Windows XP系统上）。

There isn't really a good cross-platform way to force clients to anti-alias text, and that's generally the point. Clients get to decide how to render text because the graphical capabilities of operating systems vary widely, and some people may wish to disable anti-aliasing to improve performance (on older Windows XP systems with wimpy graphics cards, for example).

从12年以上的网站开发，可用性和用户界面体验，我建议除非你有一个令人信服的理由要求在特定平台上平滑，抗锯齿的字体，离开文本呈现到浏览器。大多数现代浏览器和操作系统反对别名文本，所以它真的不应该是一个很大的交易。

Speaking from 12+ years of Web development, Usability and User Interface experience, I would suggest that unless you have a compelling reason to require smooth, anti-aliased fonts on a specific platform, leave text rendering up to the browser. Most modern browsers and OSes anti-alias text anyway, so it really shouldn't be a very big deal.

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

As for how Gitorious achieves their smooth fonts, as Frankie mentioned, they use background images in CSS:

-HTML -

-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;
}

是否有任何特定原因 em> 字体要反锯齿？

Is there any particular reason why you need fonts to be anti-aliased?

这篇关于如何在网页中进行字体反锯齿？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！