Grenzenlose Schriften

Teil 3: Image-Replacement

  1. Image-Replacement
  2. Teil 2: Image-Replacement
  3. Teil 3: Image-Replacement

Formatierung

Im Prinzip war das alles, was es braucht, damit Sifr seinen Dienst verrichtet. Aber das Beste kommt erst jetzt: das Formatieren der im Flash-Clip gezeigten Schrift. Das erledigen Sie über Anweisungen in der Datei sifr-config.js, die deutliche Anleihen bei CSS nehmen. Beispielsweise färbt der folgende Code die Schrift rot und setzt die Größe auf 21 Pixel:

Image-Replacement

© Archiv

Abseits der Norm: Sifr ermöglicht Ihnen Typografien jenseits der Standard-Browserschriften.
Sifr.replace(IhreSchrift, {
selector: 'h1',
css: [
'.Sifr-root { color: red;
font-size: 21px; }' ],
wmode: 'transparent'});

Mit dem folgenden css-Block formatieren Sie einen in der <h1>-Überschrift enthaltenen Link, sodass er beim Daraufzeigen mit dem Mauszeiger unterstrichen wird:

css: [
'.Sifr-root { color:
#d3031b; }',
'a:link { text-decoration:
none; color: #769c0d; }',
'a:visited { text-
decoration: none; color: #769c0d; }',
'a:hover { text-decoration:
underline; color: #769c0d; }',
'a:active { text-decoration:
underline; color: #769c0d; }'],

Auf die gleiche Weise lassen sich auch andere Tags innerhalb eines durch Sifr ersetzten Tags formatieren, zum Beispiel eine Hervorhebung mit <strong>:

css: [
'.Sifr-root { font-size:12px;
font-weight:normal; }',
'strong { font-weight:bold; }'],

Eine Übersicht aller für Sifr verständlichen CSS-Anweisungen finden Sie in der Sifr-Dokumentation auf der Programm-Website. Bei Problemen können Sie außerdem statt sifr.js die Datei sifr-debug.js einbinden, die mit erweiterten Meldungen bei der Fehlersuche hilft. Außerdem steht das englischsprachige Forum unter mit Rat und Tat zur Seite.

Feintuning

Es gibt eine ganze Reihe von Parametern, über die Sie Sifrs Erscheinungsbild feinsteuern können. Einer der wichtigsten davon ist TuneHeight, das (vor allem zu große) Innenabstände um eine definierbare Anzahl Pixel korrigiert:

Sifr.replace(IhreSchrift, {
selector: 'h1',
wmode: 'transparent',
tuneHeight: '-5'});

In diesem Zusammenhang empfiehlt sich unbedingt ein Blick in die Dokumenta-tion der verschiedenen Sifr-Methoden und -Parameter, die unter online bereitsteht. Dort finden Sie nicht nur Mittel und Wege, um beispielsweise Text mit Gewalt auf eine einzige Zeile zu beschränken oder Filter auf die Flash-Clips anzuwenden, sondern mit modifyContent() sogar eine Möglichkeit, den Text vor dem Ersetzen mit Sifr zu modifizieren.

Als grundsätzliche Maßnahme empfiehlt es sich, die Anzeige des durch Sifr zu ersetzenden Textes während des Ladens zu unterdrücken. Anderenfalls erscheint der Text nur, um kurz darauf ersetzt zu werden, was zu einem unangenehmen Blink-Effekt führt. Bewerkstelligen können Sie das mit einem Eingriff in Sifr-screen.css oder Ihr Screen-Stylesheet:

.Sifr-active h1 { visibility:
hidden; }

Mehrere Schriften

Eines der häufigsten Probleme ist vor allem für Javascript-Einsteiger die Integration einer zusätzlichen Schriftart. Diese Aufgabe lässt sich recht leicht lösen. Ansatzpunkt ist wiederum sifr-config.js. Zunächst definieren Sie eine zweite Variable, in der Sie den Pfad zur zusätzlichen Schrift speichern:

var IhreZweiteSchrift = {
src: '/flash/schriftart2.swf' };

Natürlich müssen beide Schriften initialisiert werden:

Sifr.activate(IhreSchrift,
IhreZweiteSchrift);

Anschließend können Sie auf beide Schriften zugreifen:

Sifr.replace(IhreSchrift, {
selector: 'h1',
wmode: 'transparent'});
Sifr.replace(IhreZweiteSchrift, {
selector: 'h2',
wmode: 'transparent'});

Es lohnt sich

Sifr erweitert die typographischen Möglichkeiten des Webdesigners enorm, vorausgesetzt man nimmt in Kauf, dass sich die Wartezeit bis zur vollständigen Anzeige der ersten Seite eines Web-Auftritts etwas hinauszögert. Im Netz finden Sie einige Erweiterungen für Sifr, welche die Clips beispielsweise um Farbverläufe () und andere Effekte bereichern.

Und unter gibt es eine Methode, um Bilder automatisch durch im Browser aufgepeppte Pendants zu ersetzen, die genauso funktioniert wie Sifr.

zm_timkaufmann

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".