How to use sIFR : Easy Steps

What is sIFR

sIFR (or Scalable Inman Flash Replacement) is a technology that allows you to replace text elements on screen with Flash equivalents.

Steps to use sIFR

  • download sifr Click here to download
  • create swf file with your custom font in it.
  • add following files in your website sub folder (in my case i have used ‘custom-font’)
    • sIFR-screen.css
    • sIFR-print.css
    • sifr.js
    • sifr-addons.js
  • add the following lines of code in your html head tags

    <link rel=”stylesheet” href=”custom-font/sIFR-screen.css” type=”text/css” media=”screen” />
    <link rel=”stylesheet” href=”custom-font/sIFR-print.css” type=”text/css” media=”print” />
    <script src=”custom-font/sifr.js” type=”text/javascript”></script>
    <script src=”custom-font/sifr-addons.js” type=”text/javascript”></script>

  • add befoew body closing tag

    <script type=”text/javascript”>
    //<![CDATA[
    /* Replacement calls. Please see documentation for more information. */

    if(typeof sIFR == “function”){
    sIFR.replaceElement(“h2.golden-heading”, “AvenirLight.swf”, “#448971”, “#448971”, null, null, 0, 0, 5, 0);
    };
    //]]>
    </script>

here in above code “sIFR.replaceElement” function gets the paramerts for :
sIFR.replaceElement(“[(tage name)html tag where you want to apply sifr style]”, “[Your font swf file for example albertus.sw]f”, “static text color”, “hyperlink color”, “hover color” , “back color”, 0, 0, (font size-the greater the num the smaller the font), 0);

(tage name) explains
to apply style in a id use h2#heading-id
to apply style in a class use h2.heading-class
to apply style in all tags use h2 (without any # or .)

  • add your created swf file in your website
    swf file should be in the same folder where you are using it. otherwise have to give the full path.

Known Issues

These “decoy” styles defined in “sIFR-screen.css” as below:

.sIFR-hasFlash h2.golden-heading {
visibility: hidden;
letter-spacing: 0px;
font-size: 14px;
}

are used to hide the browser text before it is replaced… the negative-letter spacing in this case is used to make the browser text metrics match up with the sIFR text metrics since the sIFR text in this example is so much narrower… your own settings may vary… any WEIRED SINZING ISSUES you may run into are usually fixed by tweaking these decoy styles.

Advertisements

~ by UTS on June 9, 2009.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: