sIFR leicht gemacht

3. März 2010 · Computerkram · Ein Kommentar

Es ist schon eine Weile her, dass ich mir Gedan­ken um die Ein­bin­dung von alter­na­ti­ven Schrif­ten Gedan­ken gemacht habe. Heute fand ich dann auch mal die Zeit, mich näher mit den Mög­lich­kei­ten aus­ein­an­der zu set­zen und nahm mir eine Test­seite vor, auf der ich per sIFR die Schrif­ten erset­zen wollte. Auf Anhieb liest sich die Anlei­tung dazu rela­tiv kom­pli­ziert, eigent­lich geht das aber in weni­gen ein­fa­chen Schrit­ten. Mehr dazu nach dem Klick.

Als ers­tes baue ich mir eine kleine Test­seite, die nicht viel ent­hält außer ein paar Absät­zen und drei Über­schrif­ten h1, h2 und h3. So sieht das dann aus:

Als kleine Her­aus­for­de­rung habe ich in die zu erset­zen­den Über­schrif­ten auch ein paar Umlaute ein­ge­baut und auch mal ein ß verwendet.

Im zwei­ten Schritt lade ich die aktu­elle Ver­sion von der sIFR-Seite her­un­ter. Den kom­plet­ten Ord­ner kopiere ich in mei­nen Tes­t­ord­ner und binde die rele­van­ten Dateien direkt ein. Dazu kom­men die bei­den fol­gen­den Zei­len in den Hea­der des HTML-Dokumentes:

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

Mit sIFR wird die Schrift­art „Trade Gothic“ mit­ge­lie­fert. Die gefällt mir aller­dings nicht son­der­lich gut und so schaue ich mich nach Alter­na­ti­ven um. Gut, dass ich in der letz­ten Zeit schon einige Links zu die­sem Thema gespei­chert hatte. Meine Lieb­lings­seite ist¹ fontsquirrel.com. Dort ent­scheide ich mich für die Schrift Edo. Da ich mich die­ser Tage auch noch mit dem Ein­bet­ten von Schrif­ten per @font-face beschäf­ti­gen will, lade ich mir gleich das kom­plette @font-face Kit dazu her­un­ter. Das werde ich dann brauchen.

Heute geht es aber um sIFR und des­halb brau­che ich nun erst ein­mal eine Flash­da­tei mei­ner Schrift. Das mag zuerst nach einer Hürde klin­gen. Wenn man aber weiß das es die Seite sifrgenerator.com gibt, dann ist alles gar nicht mehr so schlimm. Dort gene­riere ich mir in fünf ein­fa­chen Schrit­ten aus mei­ner edo.ttf–Datei eine edo.swf–Datei, die ich dann nach dem Down­load in den sIFR-Ordner kopiere.

Bis­her hat sich an mei­ner Bei­spiel­seite noch rein gar nichts geän­dert. Das liegt daran, dass ich dem sIFR noch nicht mit­ge­teilt habe wel­che HTML-Elemente es erset­zen soll. Dazu füge ich inner­halb des Body-Bereichs der Seite noch fol­gen­den Code hinzu:

		<script type="text/javascript">
			if(typeof sIFR == "function"){
				sIFR.replaceElement("h1", named({sFlashSrc: "sIFR/edo.swf", sColor: "#003366"}));
				sIFR.replaceElement("h2", named({sFlashSrc: "sIFR/edo.swf", sColor: "#ffcc00"}));
				sIFR.replaceElement("h3", named({sFlashSrc: "sIFR/edo.swf", sColor: "#ff0000"}));
				sIFR.replaceElement("h4", named({sFlashSrc: "sIFR/edo.swf", sColor: "#000"}));
				sIFR.replaceElement("h5", named({sFlashSrc: "sIFR/edo.swf", sColor: "#000"}));
			};
		</script>

Damit teile ich dem sIFR-Code mit, dass er doch bitte für mich die Über­schrif­ten ers­ten bis fünf­ten Gra­des erset­zen soll und mit wel­cher Schrift­art das gesche­hen soll. Außer­dem gebe ich auch noch eine Schrift­farbe mit. So sieht meine Seite dann anschlie­ßend aus.

An sich ist das schon recht hübsch², aller­dings scheint es hier noch ein wenig Pro­bleme bei der Schrift­größe zu geben. Zuerst pro­biere ich ein wenig mit CSS-Befehlen in mei­ner HTML-Datei herum, was aber nicht so recht zu einem Ergeb­nis füh­ren will. So nehme ich mir also mal das ein­ge­bun­dene Style­s­heet sIFR-screen.css vor. Hier finde ich tat­säch­lich Befehle, die auf meine Überschriften-Tags ein­wir­ken. Mit dem Befehl visi­bi­lity: hid­den; wird, wie ich ler­nen muss, das ursprüng­li­che HTML-Element aus­ge­blen­det nach­dem der Flash-Ersatz geren­dert ist. Nach­dem ich alle ande­ren Befehle (font-size und letter-spacing) gelöscht habe, sieht meine Test­seite auch so aus wie ich mir das vorstellte.

Nun habe ich natür­lich nur eine ganz rudi­men­täre Lösung gebas­telt. In der Anlei­tung zu sIFR fin­den sich noch wei­tere Befehle, mit denen sich unter ande­rem Link­far­ben bestim­men oder die Texte aus­rich­ten las­sen. Auch per Style­s­heet lässt sich noch eini­ges Steu­ern, aller­dings bemerke ich hier beim her­um­spie­len, dass das doch ein wenig fri­cke­lig ist. Viele CSS-Befehle erkennt er auch nicht. Das finde ich doof und an die­ser Stelle ver­lässt mich dann ein wenig die Lust. Nicht nur, weil es anfängt fri­cke­lig zu wer­den: Auch wenn mich das Ergeb­nis auf den ers­ten Blick wirk­lich gefällt, habe ich zudem wei­ter­hin bestän­dig im Hin­ter­kopf das ich hier auf eine Flash-Lösung setze. Flash kann man gut fin­den oder auch ver­teu­feln. Ich finde schon, dass es seine Anwen­dungs­ge­biete hat. Ob dies auch an die­ser Stelle der Fall ist, sei dahingestellt.

1. Nicht nur weil ein Eich­hörn­chen im Namen vor­kommt… [↩]
2. Memo an mich selbst: Das nächste Mal neh­men wir eine Schrift die Groß– UND Klein­buch­sta­ben kann! [↩]