CODEWITHSUNDEEP
htmlcsstextfonts
waterprism
waterprism

Reputation: 71

Which font embedding technique allows one to suppress anti-aliasing?

I'm bewildered by all the different font embedding techniques, Cufon, @font-face, FLIR, Typekit, etc., and don't know where to begin with this, especially since there's just one specific behaviour I need. Are there any font embedding techniques that will render a font without anti-aliasing/smoothing/ClearTyping?

I have always just designed to whatever my computer/monitor renders and haven't even thought about it twice. But with this particular site, I'm using opacity on a div that floats on a glassy PNG and the ClearType is just a disaster. The ClearType anti-aliasing on this background combo is standing out darkly, creating what's essentially a bolded font. If I apply an alpha opacity filter on IE8, it removes the ClearTyping, showing me just the single pixel strokes and it looks perfect.

So, do any of the font-embedding techniques allow one to disable anti-aliasing rendering on the font cross-browser? I know probably sIFR would, but would really prefer not to use Flash, as my target audience would most likely be the chief one out there who wouldn't keep it updated: B&M companies.

Upvotes: 4

Views: 296

Answers (1)

abitgone
abitgone

Reputation: 561

Technically speaking, no font-embedding technique will allow you to suppress anti-aliasing. What you need is a CSS property to tell the browser that you'd prefer if some elements on your page were not anti-aliased.

Now, whilst this may not be helpful to all your endeavours, especially if a large portion of your audience isn't using WebKit-based browsers, some WebKit browsers support something similar to the proposed font-smooth CSS property, as explained in Max Voltar's post on font-smoothing, using:

-webkit-font-smoothing: none;

Would be similar to the W3C proposed font-smooth property:

font-smooth: never;

Max's article also links to a demo page by Christoph Zillgens which shows you the effect in action, with a caveat that it only appears to work on OS X.

As Aram Kocharyan says above, it may well be that – right now – you can't rely on this property and would have to leave it to let the browser decide.

Some earlier Internet Explorer engines also alias the text if the opacity is set to anything other than 1 – you could try 0.999 as the value and see what happens there.

Upvotes: 1

Related Questions