Is it possible to disable anti-aliasing in CSS when using @font-face with pixel fonts?

I want to use a pixel font on the web. I'm including it usin开发者_如何学编程g @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?

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.

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

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.

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

Yes, this is possible.

I was looking for this as well. And I eventually found a solution on another stackoverflow thread ( How to get "crispEdges" for SVG text? ) to disable text smoothing ( disable anti-alias ) for SVG but this solution also works for regular HTML elements.

The trick is using using an SVG filter, which you can then add to any HTML element to make anything crispy.

1. First we need to define the filter, so we can use it inside of our CSS.

<svg class="offscreen" width="0" height="0" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="crispify">
            <feComponentTransfer>
                <feFuncA type="discrete" tableValues="0 1"/>
            </feComponentTransfer>
        </filter>
    </defs>
</svg>

2. Add the filter to a HTML element that only contains text. If it has a background-color, it doesn't work.

p {
    filter: url(#crispify);
}

3. extra stuff: you will probably want to hide the SVG element, so add this to the CSS

.offscreen {
    position: absolute;
    left: -100000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

4. another thing: if it looks weird with a white color, change the color to black and invert it using another filter, so your code looks like this:

p {
  filter: url(#crispify) invert(1);
}

5. Note, I do not know if this will work with all browsers, but it does work on Chrome, Edge and Firefox.

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 ;)

Nope.

As of 2022, all of these answers are broken except for the SVG one, and in that one's case you get inconsistent scaling when working with smaller sizes (Like, 24 and below...yeah, it's useful for very large headings). font-smooth is an option indeed, but it shouldn't be your first because it's actually -webkit-font-smoothing/-moz-osx-font-smoothing, and as the latter would imply, neither work on anything other then Mac OS X.

I have seen things such as 98.css use custom fonts that have characters constructed with boxes, which doesn't solve the problem but mitigate it. This is a VERY tedious process to do, though, and while this works fine for MS Sans Serif, it fails for more packed fonts and/or fonts at smaller sizes.

Your best option is to create images for any texts you want to be sharp. On that note, I created a program that converts PNGs to SVGs without tracing, which is a solution to let pixel perfect images be displayed properly on larger, 1440p monitors.