dalethedeveloper/gist:1846552

## gistfile1.md

      
    Raw
  

              gistfile1.md
            
          
    #Techniques for Anti-Aliasing @font-face on Windows
It all started with an email from a client: Do these fonts look funky to you? The title is prickly.
The font in question was Port Lligat Sans from Google Web Fonts.
The "prickly" is aliasing caused by lack of hinting


Turns out that several @font-face selections do not contain hinting to make them buttery smooth on Windows even though Mac and Linux are fine.  Even those at Font Squirrel and Google Fonts.  This led to http://stackoverflow.com/questions/3451541/css-font-face-anti-aliasing.
##CSS3 font-smooth

Source: http://www.w3.org/TR/WD-font/#font-smooth
Idea: Use a baked in tag to make the browser's rendering engine handle the dirty work

Code:
font-smooth: always;

##A Little Twist

Source: http://willmoyer.com/plato/
Idea: Give the font a slight CSS3 tilt to rotate jagged edges away from pixels

Code:
transform: rotate(-0.0000000001deg)

##Force Subpixel Anti-Aliasing

Source: http://maxvoltar.com/archive/-webkit-font-smoothing
Idea: Use a vendor specific tag to force webkit browsers to smooth things out

Code:
-webkit-font-smoothing: subpixel-antialiased;

##Use text-shadow to Hide Aliasing

Source: http://www.elfboy.com/blog/text-shadow_anti-aliasing/
Idea: Add an alpha faded 'fuzziness' with text-shadow to hide jagged edges

Code:
text-shadow: 0 0 1px rgba(0,0,0,0.3);

#Verdict
On Windows 7 with IE9, FF10, and Chrome16 the winner is...text-shadow.  None of the other options worked to any degree with font-smooth completely unsupported, transform not being consistent, and the -webkit-font-smoothing being a vendor specific tag (and it still didn't work).
text-shadow fuzzing abates the aliasing


The trick now is only applying this property to Windows browsers.  jQuery to the clumsy, awkward rescue.
jQuery(document).ready(function($) { 
	var shadowify = function (e) {
		var color = jQuery(e).css('color'),
			size  = jQuery(e).css('font-size');

		// Got Hex color?  Modify with: http://stackoverflow.com/questions/1740700/get-hex-value-rather-than-rgb-value-using-jquery
		if ( color.search('rgb') == -1 )
			return;

		var rgba = color.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+))?\)$/);
		jQuery(e).css('text-shadow', '0 0 1px rgba('+rgba[1]+','+rgba[2]+','+rgba[3]+',1)');

	// To use calculated shadow of say, 1/15th of the font height 
	//var fsize = size.match(/(\d+)px/);
	//jQuery(e).css('text-shadow', '0 0 '+(fsize[1]/15)+'px rgba('+rgba[1]+','+rgba[2]+','+rgba[3]+',0.3)')
	}


	if(navigator.platform.indexOf('Win') != -1)
		$('.menu a,#header_right a,.event_title a, h1 a, h2 a').each(function(){shadowify(this)});
		//^ Your appropriately targeted list of elements here ^
});