Website - Alle lettertypen gebruiken via sIFR 3


Verouderde techniek
Voor de opkomst van tablets en mobiel werd sIFR vaak ingezet om speciale lettertypen te kunnen tonen. De techniek is echter gebaseerd op Flash en zodoende werkt sIFR niet op bijvoorbeeld de iPad en de iPhone, daarnaast is het tegenwoordig beter en makkelijker om speciale lettertypes te tonen met CSS.

Normaal gesproken kun je maar een beperkt aantal lettertypen gebruiken op je website zoals Arial, Times New Roman en Verdana. Met behulp van sIFR is het mogelijk om elk lettertype te gebruiken op je website wat dan met name bedoeld is om koppen te plaatsen in een eigen gewenst lettertype zoals bijvoorbeeld een aangeschaft lettertype. sIFR is de afkorting voor Scalable Inman Flash Replacement en is gemaakt door Mike Industries.

Javascript en Flash
Het script is een combinatie van Javascript en Flash, het gewenste lettertype zelf staat in het Flashbestand (swf). sIFR vervangt een element zoals de normale koppen, bijvoorbeeld een H2 met behulp van Javascript wat gewoon in de broncode van de website staat. Het script controleert zelf of de gebruiker Flash ondersteund, zo niet dan wordt automatisch de normale kop getoond zoals die eruit ziet zonder de Flash vervanging.

De H2 staat dus ook gewoon als tekst in de broncode en daardoor is deze manier ook zoekmachinevriendelijk wat belangrijk is. Ook kan de tekst geselecteerd worden.

Gebruiken
Om sIFR te gebruiken doen download eerst het onderstaande ZIP-bestand met het orginele script en het .fla bestand wat aangepast moet worden met behulp van Flash van Adobe. Hierin wordt het lettertype ingesteld wat je straks gaat gebruiken.

Flash
Na het uitpakken vind je in de map "flash" het bestand genaamd sifr.fla. Open dit bestand met Flash, in dit geval Flash 8. Eenmaal geopend zie je aan de rechterkant een movie clip staan met de naam "holder", klik hier met de rechtermuisknop op en klik op Edit.

Alle lettertypen gebruiken via sIFR

Selecteer dan het vlak met de tekst en pas onderin Flash het lettertype aan naar het gewenste lettertype zoals in dit geval het lettertype Ravie.

Alle lettertypen gebruiken via sIFR

Een eventuele vervolgstap maar niet noodzakelijk is het toevoegen van speciale tekens zodat bijvoorbeeld ook "" wordt onderteund. Hiervoor moeten dan een aantal karaktersets worden toegevoegd. Selecteer de tekst en druk onderaan in de werkbalk op de "embed" knop, selecteer naast de al geselecteerde karaktersets de karaktersets zoals hieronder.

Alle lettertypen gebruiken via sIFR

Ga daarna bovenin in het menu naar File, Export en kies Export Movie en sla het .swf bestand op, in dit geval ravie.swf en upload deze naar een locatie op je website.

Configureren
Dan komen de volgende stappen. In de map die je net hebt uitgepakt zitten een aantal .js bestanden genaamd sifr.js en sifr-config.js. Het laatste sifr-config.js bevat de instellingen voor de lettertypen op de website, open deze eerst. Normaal bij het downloaden van het sIFR script is dit bestand leeg, in deze download is het bestand al gevuld.

De code ook hieronder, vul hier dan eerst de bestandslocatie van het .swf bestand in op de tweede regel "src: 'font.swf'". Achter "selector" staat de tag / kop aangegeven die je wilt gaan vervangen zoals in dit geval alle H2's binnen een pagina, vervang dit naar wens.

//<[CDATA[
var font1 = { src: 'ravie.swf' };
sIFR.useStyleCheck = true;
sIFR.activate(font1);

sIFR.replace(font1, {
selector: 'h2'
,css: [
'.sIFR-root { color: #02243d; font-size:26px; font-style:italic; }'
,'a { color: #02243d;text-decoration: none; }'
,'a:visited { color: #02243d;text-decoration: none; }'
,'a:hover { color: #02243d;text-decoration: none; }'
]
, wmode: 'transparent'
});


Configureren
Dan kun je in de code opmaak meegeven met behulp van CSS code zoals in het voorbeeld hierboven gedaan is. Je geeft een kleur en de grootte aan. In het voorbeeld staat ook nog 'font-style:italic' vermeld. Eronder de eigenschappen voor links.

De laatste regel "wmode: 'transparent" staat niet standaard in het originele script maar is in dit geval al toegevoegd omdat deze regel zorgt dat sIFR werkt in combinatie met Lightbox. Mak je geen gebruik van Lightbox kan deze regel er dus uitgehaald worden.

Uploaden
Upload de .js bestanden nu naar je eigen website en roep deze in de HTML aan in het <head> gedeelte middels de onderstaande code waarin het pad zit van het bestand.

<script src="sifr.js" type="text/javascript"></script>
<script src="sifr-config.js" type="text/javascript"></script>


In dezelfde map zitten ook twee CSS bestanden, sIFR-screen.css en sIFR-print.css. Upload deze ook naar je website en roep ze in de HTML aan.

<link rel="stylesheet" href="sIFR-screen.css" type="text/css" media="screen" />
<link rel="stylesheet" href="sIFR-print.css" type="text/css" media="print" />


Plaats de H2 zoals normaal en de tekst wordt automatisch vervangen.

<h2>Dit is de tekst geplaatst met behulp van sIFR</h2>


Dit is de tekst geplaatst met behulp van sIFR

Je kan op deze manier ook meerdere combineren en zodoende een ander lettertype toepassen op een andere kop. In het onderstaande geval worden alle H1's vervangen voor het lettertype Segoe. Vul dan bovenin het script een extra regel in om het .swf bestand hiervoor aan te roepen en vul de naam hiervan in achter "var".

Het lettertype moet dan ook geactiveerd worden, vul dezelfde naam dan ook in op de activatie regel, "sIFR.activate(font1, font2)". Als laatste kopieer je het gedeelte met de eigenschappen voor de betreffende kop zoals hieronder.

//<[CDATA[
var font1 = { src: 'ravie.swf' };
var font2 = { src: 'segoe.swf' };

sIFR.useStyleCheck = true;
sIFR.activate(font1, font2);

sIFR.replace(font1, {
selector: 'h2'
,css: [
'.sIFR-root { color: #02243d; font-size:26px; font-style:italic; }'
,'a { color: #02243d;text-decoration: none; }'
,'a:visited { color: #02243d;text-decoration: none; }'
,'a:hover { color: #02243d;text-decoration: none; }'
]
, wmode: 'transparent'
});

sIFR.replace(font2, {
selector: 'h1'
,css: [
'.sIFR-root { color: #02243d; font-size:26px; font-style:italic; }'
,'a { color: #02243d;text-decoration: none; }'
,'a:visited { color: #02243d;text-decoration: none; }'
,'a:hover { color: #02243d;text-decoration: none; }'
]
, wmode: 'transparent'