Skip to content

Instantly share code, notes, and snippets.

@dalethedeveloper
Created February 16, 2012 17:18
Show Gist options
  • Save dalethedeveloper/1846552 to your computer and use it in GitHub Desktop.
Save dalethedeveloper/1846552 to your computer and use it in GitHub Desktop.
Techniques for Anti-Aliasing @font-face on Windows

#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

Code:

font-smooth: always;

##A Little Twist

Code:

transform: rotate(-0.0000000001deg)

##Force Subpixel Anti-Aliasing

Code:

-webkit-font-smoothing: subpixel-antialiased;

##Use text-shadow to Hide Aliasing

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 ^
});
@oakaigh
Copy link

oakaigh commented Apr 24, 2019

    color: transparent;
    text-shadow: 0 0 0.7px black;

works for me.

@bm2ilabs
Copy link

Thank you it works

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment