Forcing anti-aliasing using css Is this a myth

Question

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

User · Answer

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.

User · Answer

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  amp  Elastic Layouts with CSS for more information about this

User · Answer

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

User · Answer

I disagree with Chad Birch  We can force anti-aliasing  at least in Chrome using a simple css trick with the -webkit-text-stroke property -   -webkit-text-stroke  1px transparent

User · Answer

Oh yes you can  -webkit-font-smoothing  antialiased  -moz-osx-font-smoothing  grayscale  font-smoothing  antialiased   Source for Firefox  thanks Justin for the heads up

User · Answer

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

User · Answer

Not a pure CSS but natively supported method without any font replacement hacks  Simply convert your font to SVG and place it higher before WOFF or TTF  in  font-face order  Voila  Fonts are smooth now  because they re no longer treated as a font but an SVG shape which will be nicely smoothened   Note  I noticed that SVG can weight more than WOFF or TTF

User · Answer

Here s a nice way to achieve anti-aliasing   text-shadow  0 0 1px rgba 0 0 0 0 3

User · Answer

Seems like the most exhaustive solution can be found at http   www elfboy com blog text-shadow anti-aliasing    Works in Firefox and Chrome  although Firefox is not quite as effective as Chrome

User · Answer

There s these exciting new properties in CSS3   font-smooth always  -webkit-font-smoothing  antialiased    Still not done much testing with them myself though  and they almost definitely won t be any good for IE  Could be useful for Chrome on Windows or maybe Firefox though  Last time I checked  they didn t antialias small stuff automatically like they do in OSX   UPDATE  These are not supported in IE or Firefox  The font-smooth property is only available in iOS safari as far as I remember

User · Answer

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    lt div class  insane-aa-4b  gt   lt div class  insane-aa-blur  gt   lt div class  insane-aa-inner  gt     lt div style  font-size 12px   gt Lorem Ipsum lt  div gt   lt  div gt  lt  div gt  lt  div gt    You can use this short jQuery to force anti-aliasing  just add the ieaa class to anything     function        ieaa   wrap    lt div style  zoom 0 25   gt  lt div style  zoom 1 filter progid DXImageTransform Microsoft Blur pixelRadius 2    gt  lt div style  zoom 4   gt  lt     div gt  lt     div gt  lt     div gt

User · Answer

Adding the following line of CSS works for Chrome  but not Internet Explorer or Firefox   text-shadow   fff 0px 1px 1px

User · Answer

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

User · Answer

The px to pt fix worked for me on a site that uses a font from Google Web Fonts   On Win7 - IE8 it correctly fixed the lack of anti-alias rendering

User · Answer

I found a fix      text               font-size  15px      for firefox                 font-size  90        restart the antialiasing for ie  note the   hack                font-weight  bold     needed  don t know why

User · Answer

As a side note  Gecko and WebKit support the the   text-rendering   property as well

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

Examples related to css

Examples related to fonts