15 May 2009 : Optimising rollovers in sIFR 3
15 June 2009 : Update, of course there's an easier way to do it :)
sIFR.replace(avantgarde, {
selector: '#centralpanel h2'
,css: [
'.sIFR-root { text-align: left; color: #161616; letter-spacing:-0.3;}'
], wmode: 'transparent'
,sharpness: -30
,thickness: -100
});
sIFR's a great solution for displaying non web-safe typefaces, but I have a couple of minor annoyances with it. Firstly sIFR 3 takes a lot more tweaking than previous versions to get up and running correctly, and its important to do it right otherwise you get, amongst other things, a brief flash of the replaced text which looks pretty clunky. All this is solved by a bit of hard work but one thing I couldn't fix is what happens on rollover which is illustrated below. The text field has customised aliasing on it, when its black the weight is fine, but on rollover (when it goes to an off white #e7e2f2) the aliasing makes the font look heavier. Urrgh ugly!
The only way I've found to solve it is to modify sIFR.as to detect what color the type is and modify the sharpness and thickness of the aliasing accordingly. Its all a bit hackish but anyone interested can download the .as file here and search for the /*hoppermagic*/ comments. Alternatively take a look at this demo. I'm changing the aliasing on anything thats #e7e2f2 - an off white, anything that's not this color (eg pure white #ffffff) will stay chunky but it could obviously be tweaked for any colour. I'm sure there must be a better solution out there though so if anyone knows it please shout!
