sairion · January 9, 2014 18:18 · Jun 12, 2012 · Feb 17, 2012 · Feb 17, 2012 · Feb 17, 2012
diff --git a/gistfile1.md b/gistfile1.md
@@ -61,14 +61,17 @@ The trick now is only applying this property to Windows browsers.  jQuery to the
     	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 ( rgb.search('rgb') == -1 || clr.search('px') == -1 )
+    		if ( color.search('rgb') == -1 )
     			return;
-
-    		rgb = rgb.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+))?\)$/);
-    		sze = clr.match(/(\d+)px/);
-    		jQuery(e).css('text-shadow', '0 0 1px rgba('+rgb[1]+','+rgb[2]+','+rgb[3]+',1)');
+
+    		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)')
     	}
 
 

diff --git a/gistfile1.md b/gistfile1.md
@@ -4,10 +4,10 @@ It all started with an email from a client: *Do these fonts look funky to you? T
 
 The font in question was [Port Lligat Sans](http://www.google.com/webfonts#UsePlace:use/Collection:Port+Lligat+Sans) from Google Web Fonts.
 
-
-<img src="http://dl.dropbox.com/u/931493/github/font-face_no-hint_windows_aliasesd.png" />
-<br/>
 **The "prickly" is aliasing caused by lack of hinting**
+<br/>
+<img src="http://dl.dropbox.com/u/931493/github/font-face_no-hint_windows_aliasesd.png" />
+
 
 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](http://stackoverflow.com/questions/3451541/css-font-face-anti-aliasing).
 
@@ -51,9 +51,9 @@ Turns out that several @font-face selections do not contain hinting to make them
 
 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).
 
-<img src="http://dl.dropbox.com/u/931493/github/font-face_no-hint_windows_text-shadow.png.png" />
-<br/>
 **text-shadow fuzzing abates the aliasing**
+<br/>
+<img src="http://dl.dropbox.com/u/931493/github/font-face_no-hint_windows_text-shadow.png.png" />
 
 The trick now is only applying this property to Windows browsers.  jQuery to the clumsy, awkward rescue.
 

diff --git a/gistfile1.md b/gistfile1.md
@@ -4,7 +4,10 @@ It all started with an email from a client: *Do these fonts look funky to you? T
 
 The font in question was [Port Lligat Sans](http://www.google.com/webfonts#UsePlace:use/Collection:Port+Lligat+Sans) from Google Web Fonts.
 
+
 <img src="http://dl.dropbox.com/u/931493/github/font-face_no-hint_windows_aliasesd.png" />
+<br/>
+**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](http://stackoverflow.com/questions/3451541/css-font-face-anti-aliasing).
 
@@ -48,8 +51,9 @@ Turns out that several @font-face selections do not contain hinting to make them
 
 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 FTW**
 <img src="http://dl.dropbox.com/u/931493/github/font-face_no-hint_windows_text-shadow.png.png" />
+<br/>
+**text-shadow fuzzing abates the aliasing**
 
 The trick now is only applying this property to Windows browsers.  jQuery to the clumsy, awkward rescue.
 

diff --git a/gistfile1.md b/gistfile1.md
@@ -48,6 +48,9 @@ Turns out that several @font-face selections do not contain hinting to make them
 
 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 FTW**
+<img src="http://dl.dropbox.com/u/931493/github/font-face_no-hint_windows_text-shadow.png.png" />
+
 The trick now is only applying this property to Windows browsers.  jQuery to the clumsy, awkward rescue.
 
     jQuery(document).ready(function($) { 

diff --git a/gistfile1.md b/gistfile1.md
@@ -4,6 +4,8 @@ It all started with an email from a client: *Do these fonts look funky to you? T
 
 The font in question was [Port Lligat Sans](http://www.google.com/webfonts#UsePlace:use/Collection:Port+Lligat+Sans) from Google Web Fonts.
 
+<img src="http://dl.dropbox.com/u/931493/github/font-face_no-hint_windows_aliasesd.png" />
+
 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](http://stackoverflow.com/questions/3451541/css-font-face-anti-aliasing).
 
 ##CSS3 font-smooth

diff --git a/gistfile1.md b/gistfile1.md
@@ -65,4 +65,5 @@ The trick now is only applying this property to Windows browsers.  jQuery to the
 
     	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 ^
     });
diff --git a/gistfile1.md b/gistfile1.md
@@ -54,7 +54,7 @@ The trick now is only applying this property to Windows browsers.  jQuery to the
     			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 ( rgb.search('rgb') == -1 && clr.search('px') )
+    		if ( rgb.search('rgb') == -1 || clr.search('px') == -1 )
     			return;
 
     		rgb = rgb.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+))?\)$/);

diff --git a/gistfile1.md b/gistfile1.md
@@ -46,6 +46,23 @@ Turns out that several @font-face selections do not contain hinting to make them
 
 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).
 
-The trick now is only applying this property to Windows browsers.  jQuery to the rescue.
-
-TO BE CONTINUED
+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 ( rgb.search('rgb') == -1 && clr.search('px') )
+    			return;
+
+    		rgb = rgb.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+))?\)$/);
+    		sze = clr.match(/(\d+)px/);
+    		jQuery(e).css('text-shadow', '0 0 1px rgba('+rgb[1]+','+rgb[2]+','+rgb[3]+',1)');
+    	}
+
+
+    	if(navigator.platform.indexOf('Win') != -1)
+    		$('.menu a,#header_right a,.event_title a, h1 a, h2 a').each(function(){shadowify(this)});
+    });
diff --git a/gistfile1.md b/gistfile1.md
@@ -1,3 +1,5 @@
+#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](http://www.google.com/webfonts#UsePlace:use/Collection:Port+Lligat+Sans) from Google Web Fonts.

diff --git a/gistfile1.md b/gistfile1.md
@@ -0,0 +1,49 @@
+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](http://www.google.com/webfonts#UsePlace:use/Collection:Port+Lligat+Sans) from Google Web Fonts.
+
+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](http://stackoverflow.com/questions/3451541/css-font-face-anti-aliasing).
+
+##CSS3 font-smooth
+
+ - **Source:** [http://www.w3.org/TR/WD-font/#font-smooth](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/](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](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/](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).
+
+The trick now is only applying this property to Windows browsers.  jQuery to the rescue.
+
+TO BE CONTINUED