Jan28
sIFR Lite Flash based type replacement, holy shit wow
- posted by: Bruce
- 7 comments
- post a comment
Once in a while you come across a script that makes your life dramatically easier. Today that script was sIFR Lite.
Over the past few months we’ve been working on a client project that requires us to use a specific typeface for page headings on the website. Rather than doing standard -9999px image replacement techniques, which would have made our intern want to gouge out his eyes with an ice pick, we decided to give the sIFR replacement technique a try. sIFR 2.0 is a technique that came out in mid 2005 and has been used by a limited number of sites. Well, as cool as it is I ran into quite a few problems when first implementing it with our project. And while I got it to work I felt slightly dirty about the implementation. Luckily a couple days later I saw a post on twitter by Matt Crest about a new solution called sIFR Lite.
Today, I finally had the chance to replace the old method with the lite version and I have to say it is exceptionally well done. Dave over at AllCrunchy.com has done a phenomenal job with his implementation of the sIFR technique. Making it lighter, easier to use, easier to install, and easier to manage. In fact, it reduces the amount of work by about 5x and in my tests it seems to render better. Better aliasing and better container size detection. Check out the example I whipped up.
Here’s the javascript code required to call sifr-lite:
window.onload = function () {
var din = new Font('din.swf', {tags:'h1'});
din.replace('h1')
}Two quick notes: First, I do find that without using the window.onload function that in Safari sometimes the text won’t pick up color. This is very minor and easy to fix.. obviously. Second, you will need to use the original sIFR to create the .swf files of your font’s. Simply use the .fla and .as files that come with that script to make your fonts, then call those fonts via sifr.lite.js. For those looking for an all in one option I’ve put it together in a zip file. Please recognize I take no credit for the sIFR script or the Lite implementation of it, I simply thought it would be nice to have an all in one package to make things work.
Update: After further testing it seems that this technique is not yet compatible with Flash Player 10 except in Internet Explorer. Hence, if you’re running Flash 10 you won’t see the replacement technique. I hope this gets fixed soon as a fix is already out for sIFR 2.
Update 2: From our comments Gyo over at (http://www.giordanopiazza.com) has released an updated and fixed up version of sIFR Lite. I plan to start using this again for our projects. Very cool!
Leave a comment