Photoshop style anti aliasing style in css

I'm in the process of setting up a stylesheet for a PSD mockup we have of a new website. Most of the text in the mockup uses the 'sharp' anti aliasing method from photoshop.

What's the best way to re-cr开发者_开发百科eate these kind of photoshop anti aliasing methods? Setting different font-weights seem way off..

Btw, the font is Arial so no funny @font-face stuff going on here

A simple alternative is a text-shadow, which is a css3 property:

#foo {
    /* text-shadow: [color] [horizontal offset] [vertical offset] [blur] */
    text-shadow: #fff 0 1px 0;
}

Play around with the settings; you can make a very sharp end edgy looking font smooth, by experimenting with different colors and blur values.

The font-smooth CSS3 property may be useful:

font-smooth: auto | never | always | <absolute-size> | length | initial | inherit 

You can use a script-based library (cufón comes to mind) to customize anti-aliasing and other text rendering effects. Note that most (if not all) such solutions are only appropriate for headers and whatnot, not the full body text.

Because you website is going to be shown in multiple browsers in multiple OS's, there is no way to get a consistent font display. I think it is down to the OS with regards to font smoothing.

If you require it, render the portions as an image or use Cufon or sIFR.

What I have also done in the past, if the font is a little rough, add a subtle CSS3 text-shadow which makes it look much smoother.