Kurztutorial: sIFR in Webseite einbinden

Einerseits als kleine Gedankenstütze, andererseits als kleine Hilfe für Hilfesuchende will ich mal kurz beschreiben, wie man sIFR in seine Internetseiten integriert.

1.) Was ist sIFR überhaupt?

sIFR ist eine Technik, mit der man anhand von Flash und Javascript relativ komfortabel andere Schriftarten in seine Webseiten integrieren kann. Normalerweise ist man ja auf ein paar wenige Web-Schriften beschränkt. Mit sIFR gibts diese Einschränkungen nicht mehr.

2.) Funktionsweise

Im Grunde genommen bekommt man ein Javascript und eine Flash-Datei, wo man die gewünschte Schrift integrieren muss. Wenn man das Ganze nun in die HTML-Datei einbaut, dann werden - sofern Javascript und Flash aktiviert sind - vorher definierte Tags umgeschrieben. Die eigentliche Schrift wird ausgeblendet und durch ein automatisch erzeugtes Flash-Filmchen ersetzt. Ist kein Flash und/oder Javascript vorhanden, so ändert sich nichts, und die Inhalte werden so formatiert, wie man es per CSS vorgegeben hat. Mehr dazu bei Mike Davidson. Der Clou an der Sache: das Ganze orientiert sich an der vorgegebenen CSS-Formatierung, so dass man beispielsweise die Schriftgröße bequem über CSS einstellen kann. Die Schriftfarben müssen leider über die JS-Funktion übergeben werden.

3.) HTML und Scripte einbinden

Die Scripte bindet man einfach im Head-Bereich der HTML-Datei ein:

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

Zusätzlich benötigen wir noch eine weitere Script-Datei, die dann am Ende des Bodys platziert werden muss:

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

In dieser Datei werden die einzelnen Aufrufe und Ersetzungen definiert. Ein Beispiel:

if(typeof sIFR == "function"){
sIFR.replaceElement(named({sSelector:"#myfont h1", sFlashSrc:"garamond.swf", sColor:"#696969", sLinkColor:"#A9EEFE", sHoverColor:"#ff9999", sBgColor:"#695757", sWmode:"transparent" }));
};

Das ist die - laut "Hersteller" - bevorzugte Syntax für den Aufruf. In diesem Fall werden alle h1-Überschriften in der ID "#myfont" in der Schrift, die in der Datei "garamond.swf" definiert ist, dargestellt. Ich denke mal, die anderen Variablennamen sprechen für sich.

Bei der Modifikation der Flash-Datei sollte man übrigens darauf achten, dass die Sonderzeichen wie Umlaute auch mit angegeben bzw. integriert werden, da sie sonst oft nicht ausgegeben werden können.

4.) Fazit

Typographie im Web ist deutlich komfortabler geworden. Man muss nicht mehr umständlich irgendwelche Grafiken erstellen oder Texte in Flash-Dateien modifizieren. Ein weiterer Vorteil dieser Technik: man kann die Texte auch markieren und kopieren, was man bei Grafiken beispielsweise auch nicht kann.

Allerdings sollte man es auch nicht übertreiben. Wenn man sich mal die mit dem Script mitgelieferte Demo-Seite ansieht, dann merkt man doch, dass das etwas auf die Performance geht. Daher: behutsam einsetzen.

 /edit 2009-04-29

6.) Update

Zwischenzeitlich hatte ich immer mal wieder das Problem, dass das Ganze auf bestimmten Seiten im Firefox nicht funktionierte. In anderen Browsern aber sehr wohl. Mein Tipp hierfür: die neuste Version von sIFR verwenden. Vielleicht nicht unbedingt die 3.0 Betaversion, aber die im Moment aktuelle 2.0.7 geht.