Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make font sharp in CSS?

Tags:

css

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;

}
like image 986
learnmore Avatar asked Nov 29 '12 14:11

learnmore


People also ask

How do I make text smooth in CSS?

auto - Allow the browser to select an optimization for font smoothing, typically grayscale . grayscale - Render text with grayscale antialiasing, as opposed to the subpixel. Switching from subpixel rendering to antialiasing for light text on dark backgrounds makes it look lighter.

Can I use font smoothing?

font-smooth has also been removed from the CSS standards and the MDN documents strongly recommend you not to use it on production websites.

What is font antialiasing?

Antialiasing refers to the smoothing of jagged edges of drawn graphics and text to improve their appearance or readability.


3 Answers

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.

like image 86
Ennui Avatar answered Oct 13 '22 07:10

Ennui


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;

}

like image 33
Jeff Walters Avatar answered Oct 13 '22 07:10

Jeff Walters


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.

like image 20
A.M.K Avatar answered Oct 13 '22 07:10

A.M.K