[css] Forcing anti-aliasing using css: Is this a myth?

I found a really awkward solution using the zoom and filter ms-only properties Example (try with no aa, standard and cleartype): http://nadycoon.hu/special/archive/internet-explorer-force-antialias.html

How it works:

-zoom up text with zoom:x, x>1

-apply some blur(s) (or any other filter)

-zoom down with zoom:1/x

It's a bit slow, and very! memory-hungry method, and on non-white backgrounds it has some slight dark halo.

CSS:

.insane-aa-4b                  { zoom:0.25; }
.insane-aa-4b .insane-aa-inner { zoom:4; }
.insane-aa-4b .insane-aa-blur  { zoom:1;
  filter:progid:DXImageTransform.Microsoft.Blur(pixelRadius=2);
}

HTML:

<div class="insane-aa-4b">
<div class="insane-aa-blur">
<div class="insane-aa-inner">
  <div style="font-size:12px;">Lorem Ipsum</div>
</div></div></div>

You can use this short jQuery to force anti-aliasing, just add the ieaa class to anything:

$(function(){ $('.ieaa').wrap(
'<div style="zoom:0.25;"><div style="zoom:1;filter:progid:DXImageTransform.Microsoft.Blur(pixelRadius=2);"><div style="zoom:4;"><'+'/div><'+'/div><'+'/div>'
); });