Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to do font antialiasing in web page?

Tags:

html

css

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 work only on the newest browsers. I didn't try it out.
  • Google Font API: this is great, and easy to use. I wonder how to use it offline.
  • A javascript library called typeface.js: which draw the text with canvas or VML. Looks great, but I failed to use it.
  • Maybe css3 supports this.

Also, I found this website, gitorious.org, uses very beautiful antialising fonts on the homepage. But I wonder how it worked. The source code shows it's just plain text, but cannot be changed using debugging tools such as Firebug. Does any one know what is behind this? Or someway else to work around this font problem.

like image 283
Shiva Wu Avatar asked Nov 02 '10 05:11

Shiva Wu


People also ask

What is anti-aliasing in Web design?

Aliasing is the visual stair-stepping of edges that occurs in an image when the resolution is too low. Anti-aliasing is the smoothing of jagged edges in digital images by averaging the colors of the pixels at a boundary.

What is font antialiasing?

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

How do I make my font sharper in CSS?

antialiased - Smooth the font on the level of the pixel, as opposed to the subpixel. Switching from subpixel rendering to antialiasing for light text on dark backgrounds makes it look lighter. subpixel-antialiased - On most non-retina displays, this will give the sharpest text.


1 Answers

One approach as suggested here is to use the the CSS property text-shadow, like so:

text-shadow: 0 0 1px rgba(51,51,51,0.5);
like image 157
Jay Avatar answered Sep 27 '22 22:09

Jay