views:

8986

answers:

10

Recently a client has complained about the appearance of a system font in IE6. Basically th issue is that IE6 doesn't support font-smoothing/anti-aliasing (I know you can turn it on in an OS setting or something). But someone threw out this gem:

"You can force font anti-alias in css by using pt instead of px."

I did a quick POC in various browsers and saw no difference. I found one reference to it online, last post on this forum:

http://www.webmasterworld.com/css/3280638.htm

This sounds like the equivalent of a web developer urban myth, my feeling is it's BS. Has anyone ever encountered it?

+1  A: 

This smells of rotten baloney.

Font smoothing is not something that the browser typically handles. I would be extremely surprised if such an old browser as IE6 has anti-aliasing code for strings.

Ben S
Antialiasing is usually handled by the system's drawing functions. This is not something the browser has to care about (some do, however, like IE7's default in this regard).
Joey
+1  A: 

I think you got it a bit wrong. Someone in the thread you pasted says that you can stop anti-aliasing by using px instead of pt, not that you can force it by using the latter. I'm a bit sceptical to both of the claims though...

Deniz Dogan
Yup, I misread that.
Sasha Sklar
A: 

I say its a myth.

The only difference I've found between pt, px, and percent based fonts is in terms of what IE will scale when the Menu > View > Text Size > ?Setting? is changed.

IIRC:

  • the px and pt based fonts will NOT scale
  • percent based fonts scale in IE just fine

AFAIK:

  • The font anti-aliasing is mostly controlled by the windows setting for "ClearType" or in the case of IE7/IE8 the IE-specific setting for ClearType.
scunliffe
A: 

I doubt there is anyway to force a browser to do anything. It would depend on the system configuration, the font used, browser settings, etc. It sounds like BS to me too.

As a note, always use relative sizes not PX.

Daniel A. White
+10  A: 

No, there's not really any way to control this as a web developer.

Small exceptions are that you can do some fake forcing of anti-aliasing by using Flash through sIFR, and some browsers won't anti-alias bitmap/pixel fonts (as they shouldn't, more info: Anti-Aliasing / Anti-Anti-Aliasing).

Also, as Daniel mentioned, it's ideal to be using em units for all fonts, see The Incredible Em & Elastic Layouts with CSS for more information about this.

Chad Birch
This is somewhat offtopic, but I'm not a proponent in elastic/bulletproof CSS layouts. They exponentially increase the amount of work if you're trying for a true "zoom" effect on a complex layout, and all A grade browsers except for IE6 support actual page zooming.
Sasha Sklar
A: 

Adding the following line of CSS works for Chrome, but not Internet Explorer or Firefox.

text-shadow: #fff 0px 1px 1px;

Matt
What does this have to do with MS ClearType?
Tom
A: 

Using an opacity setting of 99% (through the DXTransform filters) actually forces Internet Explorer to turn off ClearType, at least in Version 7. Source

Pekka
+1  A: 

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>'
); });
biziclop
+1000 if I could :D
Camilo Martin
A: 

Not sure why Matt's text-shadow response was voted down. I've applied this style to the headings I'm using Typekit with and it certainly improved the appearance. It worked not only in Chrome as he mentioned, but in Firefox 3.6.8 as well.

Ryan
A: 

There is a way to AA text on IE 7 & 8 and of course Chrome

I had this one site that had AA with text on IE. I went though everything, It took me a month to understand why.

It's really straight forward but... I will tell you all when I put up my blog site, I doubt FF supports any kind of AA but I'm hoping to find a solution for Safari using CSS3. I have a few other tricks that are kind of rare too. (twitter = JulienEtienne) I'll be back in a few weeks.

JugularKill