Is it possible to disable anti-aliasing in CSS whe

问题:

I want to use a pixel font on the web. I'm including it using @font-face however all the browsers are applying anti-aliasing to the font. I can't seem to find a CSS rule to disable this, can anyone think of another method of disabling anti-aliasing?

回答1:

Font rendering is done by the operating system and browser, so, as of yet, I believe there is little that you can do with CSS. There may be some proposed CSS rules in discussion (I've seen mention "font-smooth" or something like that), but nothing in CSS3, as far as I know, and definitely nothing in CSS2.

回答2:

This question is old, so just wanted to give an update.

Based on caniuse.com, there's a CSS property for it but has been removed from the CSS3 specification drafts. So it is not a standard solution. Some Webkit, Firefox & Opera browsers support it but it is inconsistent. It mostly works for desktop and Mac OS users

-webkit-font-smoothing: none || antialiased || subpixel-antialiased
-moz-osx-font-smoothing: auto || inherit || unset || grayscale
font-smoothing: auto || inherit || unset || grayscale

回答3:

I don't think css has an option for anti-aliasing. Try cufon instead: https://github.com/sorccu/cufon/wiki/about

It's pretty easy to use and it will render your pixel fonts very well. You might also be interested in Shaun Inman's Pxfon: http://shauninman.com/archive/2009/04/17/pxr_cufon_pxfon

回答4:

Most of pixel fonts just won't work properly if you are using them on a 8pt multiple size (8, 16, 24, etc.)

If you work on wrong font-sizes you will end up getting aliased/foggy characters.

Check this out...

http://www.fontsquirrel.com/fonts/list/style/Pixel

... it may help ;)

回答5:

I had similar problem today and it seems that although font-smooth does not work in contemporary Firefox* adding some filter does:

filter: contrast(1);

Yet it seems to be a bit hacky to disable anti-aliasing with filter. By the way it does not cause to completely disable anti-aliasing just causes it to be applied somehow differently so bitmap fonts render correctly. On the other hand it breaks rendering of non-bitmap fonts.

 * Tested on Fixedsys from http://doir.ir/fixedsys/demo.html, on Iceweasel 38.40.0, on Debian 8.