How to make font sharp in CSS?

Question

Hello everyone I'm trying to use sharp property like photoshop in Css but how can I do ?

Here is my css

#login_text
{
 position:absolute;
 top:10px;
 left:18px;
 font-size:13pt;
 font-weight:bold;
 font-family:Arial;

}

Answer 1

In addition to the CSS3 text-rendering property AMK mentioned, there is also a Webkit (Chrome) specific hack for antialiasing: -webkit-font-smoothing: antialiased; (I believe the default value is subpixel-antialiased) which is nice to use since Webkit webfont rendering can be less than ideal on Windows machines in particular. A bit more info can be found here.

There is also an old proposed font-smooth CSS3 property (see here) but as far as I know it is not implemented and doesn't do anything (at least not that I can see).

The sad reality is that you won't get Photoshop-quality font rendering on the web, especially not on a Windows machine. You can make up for this by choosing good webfonts and picking font sizes that naturally scale nicely, but there's only so much you can do.

Answer 2

Firefox 25 adds a new Mac-OS-only nonstandard property -moz-osx-font-smoothing equivilent to WebKit's -webkit-font-smoothing.

element {

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

}

Answer 3

While there is no "sharp" value, I think that the CSS3 text-rendering property is the best way to go. The effect is most noticeable on smaller font-sizes and doesn't make a big difference on large fonts.

Please note that there is very limited support for this but as far as I know it is the only method available.

Your other option (if you're using custom fonts) is to simply get higher quality vectors.