CSS: @font-face anti aliasing
With CSS3, you can use the font-smooth property, although antialiasing will still be controlled by the system defaults. If you really need to force a clean antialiasing no matter what the OS is, you have to use sIFR which automatically replace the text with a Flash component.
How to apply font anti-alias effects in CSS?
here you go Sir :-)
1
.myElement{
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
2
.myElement{
text-shadow: rgba(0,0,0,.01) 0 0 1px;
}
@font-face anti-aliasing on windows and mac
This just looks like the normal ugly way fonts are rendered in WinXP. Some (IMO: misguided) people even prefer it.
To get anti-aliasing for desktop fonts in general on XP you have to turn it on, from Display Properties -> Appearance -> Effects -> Use the following method to smooth edges of screen fonts -> ClearType. The default setting “Standard” is the old-school Windows “font smudging” technique that only bothers to turn on at larger font sizes, and then often makes a mess.
IE7+ has an option—on by default—to always use ClearType anti-aliasing to render fonts in the web browser. Other web browsers will respect the user's configured font rendering method. It is a shame that so many people still have this beneficial setting turned off, but it's not really your problem.
(There is nasty hack to make Chrome perform some anti-aliasing on text, which is:
text-shadow: 0px 0px 1px rgba(0,0,0,0);
but I seriously wouldn't recommend it.)
One thing you can do when the “Use the following method...” setting is set to “Standard”, to try to make the font get some form of anti-aliasing, is to check that the font in question doesn't have a GASP
table telling old-fashioned TrueType renderers to disable anti-aliasing at particular font sizes. You can change the GASP table using a font editor or with the ttfgasp.exe
command-line tool.
Forcing anti-aliasing using css: Is this a myth?
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.
@font-face alias issues on PC
That's a Hinting problem.
When you generate your font-face kit (like in FontSquirrel), you need to specify Hinting on the Expert options.
Choose Expert, and under Rendering, select:
Apply Hinting - Improve Win rendering.
Related Topics
Clip-Path on Chrome Leaves a Strange Line on the Edge
How to Delete Border Spacing in Table
Do Ie Browsers (IE6, 7, 8) Support @Font-Face
Can You Use CSS Transitions on Svg Attributes? Like Y2 on a Line
Box Shadows on Multiple Elements at Same Level But Without Overlap
Twitter Bootstrap - Border Pushing Contents Down
How to Force Firefox to Render Textarea Padding the Same as in a Div
Preventing Relayout Due to Scrollbar
Is It Allowed to Use Any Decimal Value in CSS Keyframe Animations
Fontawesome - Failed to Decode Downloaded Font
-Webkit-Transform-Style: Preserve-3D Not Working
Using Props to Set '&:Hover' Background-Color
Differencebetween Applying CSS Transition Property in Hover Rather Than in Its Normal State
How to Revert Back to Normal After Display:None for Table Row
Differencebetween Opacity and That Through Alpha Channel (Rgba)
Only Some Glyphicons Showing in Ie