问题
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.
来源：https://stackoverflow.com/questions/1752752/is-it-possible-to-disable-anti-aliasing-in-css-when-using-font-face-with-pixel