sIFR 3 - Image-Replacement - Teil 2
Nachdem ich im 1. Teil über die Phark-Methode berichtet habe, welche eine Grafik als Überschrift verwendet, möchte ich nun eine weitere Image-Replacement-Technik vorstellen.
sIFR 3
sIFR 3 - Demo
sIFR 3 basiert auf Javascript und Flash. Dabei können Inhalte eines bestimmten (X)HTML-Tags durch spezielle flashbasierte Schriften ersetzt werden. So sind fast alle Schriftarten möglich und eröffnen dem Webdesigner enorme Gestaltungsfreiheiten.
So können beispielsweise Überschriften automatisiert ersetzt werden. Das ist der große Vorteil zur Phark-Methode. Die Überschriften werden ohne weiteres zutun einfach ersetzt und man spart somit erheblichen Zeitaufwand.
Bei Browsern, die sIFR3 nicht unterstützen erscheinen die in HTML bzw. CSS deklarierten Überschriften. Damit wird diese Technik den Anforderungen an Usability und Barrierefreiheit gerecht.
sIFR 3 kann hier heruntergeladen werden. Eine Demo befindet sich im Downloadordner.
Man beachte, dass zur Demo die Dateien auf einen Webserver übertragen werden müssen.
Zum Erstellen einer Schriftart muss man die Datei sifr.fla in Flash öffnen und auf der weißen Fläche einen Doppelklick machen.
sifr.fla geöffnet in Flash
Ersetzt man nun die Worte durch einen beliebigen Buchstaben (z.B. „a“) und wählt eine Schriftart aus, wird diese anschließend verwendet. Möchte man auch kursiv und fett verwenden, muss man zusätzlich 2 Mal “a” eintippen und den Buchstaben dementsprechend formatieren.
Um deutsche Umlaute verwenden zu können muss unter „Eigenschaften“ -> „Einbetten…“ bei gedrückter STRG-Taste zusätzlich „Lateinisch einfach“ aktiviert werden.
Anschließend kann die Datei unter „Datei -> Exportieren > Film exportieren“ zur Verwendung speichern.
Die Dateien anschließend wie in der Demo einbinden und Texte deklarieren, die ersetzt werden sollen.
Vorteile von sIFR 3
- Schriften werden automatisiert ersetzt, somit kein Zeitaufwand - lediglich zur Einrichtung
Nachteile von sIFR 3
- große Downloadzeit & erzeugt teilweise große Rechenlast
- funktioniert nicht in allen Browsern (funktioniert ab IE6, Firefox und Safari – ab Version 2, Opera ab 9.5)
- Javascript und Flash müssen im Browser aktiviert sein
- derzeit noch im Beta-Status
Eine Alternative zu sIFR ist Typeface.js. Über die Variante Typeface wird auf folgenden Blogs eingegangen:
- Peter Kröner: typeface.js – Webfonts via Vektor-Elemente (Canvas, SVG, VML) einbinden
- webzeugkoffer.de - Typeface.js: Alternative zu sIFR?
Ähnliche Artikel
- Überschriften als Grafik - Teil1
- Dreamweaver - Syntaxhervorhebung bei phtml-Dateien
- Probleme mit Flash-Objekten nach Firefox 3-Installation
- Webdesign: Download kostenloser Schriften
- Schlanker Code für schnellere Ladezeiten
Lob, Kritik, oder Anmerkungen? Schreibe einen Kommentar oder speichere diesen Feed und erhalte zukünftig neue Berichte im Feed-Reader.
[...] nächsten Teil der Serie über Schriften im Webdesign gehe ich auf die Replacement-Methode Sifr 3 ein, welche auf Javascript und Flash basiert. CSS, Webdesign sIFR 3 – Image-Replacement - [...]