How to do font antialiasing in web page?

Question

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

• -webkit-font-smoothing attribute: It seems to w

Answer 1

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).

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.

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

-HTML-

Nobody will ever see this text if they have CSS enabled. Only search engines, screen readers, and nerds will ever see it!

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

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