Der schnellste Weg zu sIFR

- 30.Jul.09 -

Im Netz wird viel geschrieben und noch mehr ist zu lesen über Möglichkeiten Internetseiten mit alternativen Schriftarten aufzuhübschen. Mittlerweile gibt es viele Möglichkeiten, standard Text durch nicht auf dem Clientrechner installierte Schriften zu ersetzen. Im Moment gibt es drei verschiedene Herangehensweisen um (automatisiert) Text zu ersetzen.

Text durch Bilder ersetzen
Text durch Javascript zeichnen lassen
Text durch Flashgrafiken ersetzen

sIFR gehört zur dritten Kategorie. Wir möchten hier nicht darüber diskutieren welche die beste Lösung darstellt, sondern nur einen sehr schnellen Weg aufzeigen sIFR zum laufen zu bringen. Die weitverbreitete Meinung im Netz ist nach wie vor, dass sIFR schwer zu installieren sei und dass dieses Manko die Vorteile kaum aufwiegen kann.

Stimmt nicht! Wenn man weiß wie, ist sIFR sehr einfach zu installieren. Also hier eine kurze Anleitung (wohlgemerkt zu sIFR 2!):

Laden Sie sich die Files herunter (aktuell Version 2.0.7)
Entpacken Sie das Archiv und kopieren Sie die Dateien im Ordner "sIFR-2.0.7" mit einem FTP Programm (z.B. Filezilla) in ein Verzeichnis auf Ihrem Webspace
Im html Dokument, in welchem sIFR eingesetzt werden soll im <head> bereich folgende Zeilen einfügen

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

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

Bitte beachten Sie, dass Sie "ihrPfad" durch das Verzeichnis ersetzen, in welchem Sie die Dateien abgelegt haben! (relativ zu Ihrem HTML Dokument).
Im <Body> Bereich als letztes vor dem schließenden </Body> Tag fügen Sie dann folgende Zeilen ein:

<script type="text/javascript">

$(document).ready(function()
{
       if(typeof sIFR == "function")
       {
           sIFR.replaceElement("h1", named({sFlashSrc: "ihrPfad/tradegothic.swf", sColor: "#FF0000" , sWmode: "transparent"}));
       };
   });

</script>

Hier wieder das selbe: "ihrPfad" bitte durch Ihren eigenen relativen Pfad ersetzen und das tradegothic.swf durch eine eigene gewünschte Schriftart.
FERTIG! Ja für's erste ist sIFR jetzt schon einsatzbereit!

Um eigene Schriften zu verwenden:

Sie können sich z.B. von 1001fonts.com freie ttf Fonts herunterladen (bitte die Lizenzbestimmungen beachten!!) und diese dann unter sifrgenerator.com umwandeln. Die downgeloadete Datei (mit der Endung swf) dann einfach wieder per FTP auf Ihren Webspace in das sIFR Verzeichnis kopieren. Um diese dann zu verwenden einfach die Zeile

sFlashSrc: "ihrPfad/tradegothic.swf"

durch das neue swf Fontfile ersetzen. Fertig!

Näheres:

Im obigen Beispiel werden alle h1 Elemente durch die neue Schrift ersetzt. Ausserdem ist in der Datei "sIFR-screen.css" definiert, welche Element ausgeblendet werden sollen, um den zu "zeichnenden" Elementen Platz zu machen. Hier sind u.a. auch h2 bis h5 Tags aufgeführt. Dies führt in unserem Beispiel dann dazu, dass zwar h1 Überschriften ersetzt werden, h2 bis h5 aber ganz verschwinden.

Abhilfe ist ganz einfach: Entfernen Sie die Blöcke ".sIFR-hasFlash h2" bis .sIFR-hasFlash h5#pullquote" aus der Datei und alles Funktioniert einwandfrei!

Die bessere Herangehensweise wäre allerdings, eigene Klassen zu definieren, die ersetzt werden sollen. Also z.B. ".replace" um alle anderen Tags unberührt zu lassen. Also z.B. ".sIFR-hasFlash h1.replace". Jetzt können Sie in Ihrem HTML Dokument zu ersetzende h1 Tags mittels <h1 class="replace"> zum Ersetzen markieren, währen alle anderen h1 Überschriften erhalten bleiben.