CSS anti aliasing text? How have they done this?

css anti alias text

[johnbanshee]

Hi,

I have always been led to believe that css has no native support for font smoothing...or antialiasing as it is commnly referred.

Can anyone explain to me how the effect has been achieved on the following page - you need to scroll down to the three mini-titles in blue that read 'your comments' etc.

URL: removed

Correct me if I am wrong, but that text is smoothed - has it been done cunningly replacing text with graphics via css I wonder?...Its definitley text though as you can select-copy and your clipboard retains the wording...hmmmm!

Any one who can describe how to get this effect purely in css without any images is a God!

I don't know how it actually renders for anyone else so FYI I'm on IE6.0.2900.2180 on XP Pro SP2.

Thanks

JB

[edited by: SuzyUK at 3:37 pm (utc) on Mar. 13, 2007]
[edit reason] No site specifics, thanks. See TOS #13 [WebmasterWorld.com] [/edit]

[Angelis]

Look at the CSS!

<link rel="stylesheet" href="/library/styles/sIFR_screen.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/library/styles/sIFR_print.css" type="text/css" media="print" />

[Fotiman]

1. Welcome!
2. Most URLs are not permitted (see TOS)
3. The method being used is called sIFR. This stands for "Scalable Inman Flash Replacement". Essentially, the page contains text headings, and then those headings are replaced with a Flash object that uses the text to create nicer looking headings (using any font). There are pros and cons to this technique though, so do your research before you implement it. Google "sIFR".

[mikelostcause]

The CSS won't help you.

They use sIFR. It uses javascript and flash to allow a designer to use fonts and treatments that are not native on the clients machine. If flash is not installed it falls back on standard CSS documents.

-edited. removed link to sIFR documentation.

[Robin_reala]

CSS doesn't have any 'native' support for anti-aliasing as that's down to the host OS, but it's worth noting that OS-based anti-alisaing is pretty good now. MacOS X's ATSUI tech is very nice to my eyes (although some think it's over-blurred) and what I've seen of Vista's technology is very good as well.

[Jimmyco]

You are all wrong. Using CSS, anti-aliasing can be stopped by using px (pixels) instead of pt (point). You must use a pixel font, Verdana at 10px or 12px will have not aliasing. (there are a bunch of web fonts that are not true pixel fonts that will display without aliasing with the px instead of pt method).

EXAMPLES:

Non-aliasing -
<style type="text/css">
.whatever {color: 000000; font:10px 'Verdana'; text-decoration:none}
</style>

Will aliasing -
<style type="text/css">
.whatever {color: 000000; font:10pt 'Verdana'; text-decoration:none}
</style>

[edited by: Jimmyco at 6:51 am (utc) on Mar. 14, 2007]