Advanced CSS - Serverseitige Schriften - Der Internet Explorer

1. Und wieder mal

... ein eigener Abschnitt nur für unseren Lieblingsbrowser. Auf das erste Problem mit den Schrifttypen habe ich ja bereits hingewiesen. Kommen wir nun zu ein paar anderen Dingen.

Ein Hinweis

Die folgenden Erläuterungen beziehen sich ausschließlich auf den IE8. Und schimpft nicht wieder auf Winzigweich, sondern regt euch mal lieber über die Leute auf, die immer noch mit diesen Steinzeitbrowsern die Gegend unsicher machen.

2. Die Schriften

Fragt mich bitte nicht nach dem Wie und Warum, aber es sieht wirklich so aus, dass der IE einige Schriften schlichtweg nicht mag. Ich selber habe Stunden damit verplempert, weil die ausgewählte Schriftart ums Verrecken nicht dargestellt wurde und ich den Grund dafür nicht fand. Dabei handelte es sich übrigens um die "Bank Gothic Medium BT", die ich einfach mal für das erste CSS3-Tutorial nutzen wollte.

Manchmal frage ich mich wirklich, ob unser Schöpfer ein Sadist ist. Über 500 Schriftarten auf der Platte und ausgerechnet die hat der IE nicht geschluckt. Ich habe dann zig Tests mit unterschiedlichsten Schriften gemacht und bei allen funktionierte es. Nur nicht bei dieser. Meine Vermutung, die Schriftdatei hatte möglicherweise einen leichten Hau weg. Aber das ist eigentlich nur Glaskugellesen.

Also

Wenn der IE eine Schrift partout nicht darstellen will, so sucht euch eine neue. Alles andere ist nach meiner Erfahrung reine Zeitverschwendung. Macht am Besten ganz zu Beginn einen Test und wenn der in die Hose geht, dann wird das nichts.

3. Die Einbindung

Da gibt es vier Möglichkeiten. Zum einen kann man mit Conditional Comments arbeiten. Das ist aber nicht so pralle, da man sonst nur für die Schriftarten schon zwei Dateien einbinden oder man die Schrift im Kopf einer jeden Seite angeben müsste. Kommen wir nun zu den vernünftigen Möglichkeiten.

Doppelte Deklaration

Die habe ich euch ja schon zu Beginn gezeigt. Einfach zwei @font-face-Anweisungen und gut ist. Vorausgesetzt, die .eot-Datei wird zuerst angegeben.

Abgetrennt

@font-face {
  font-family: "Comic Sans MS Fett";
  src: url('comicbd.eot');
  src: url('comicbd.woff'),
       url('comicbd.otf'),
       url('comicbd.ttf'); 
}

Man deklariert die Schrift für den IE in einer eigenen Anweisung am Anfang. Es gibt dabei noch eine Feinheit, aber zu der komme ich gleich.

"Gelattenzaunt"

@font-face {
  font-family: "Comic Sans MS Fett";
  src: url('comicbd.eot#iefix'),
       url('comicbd.woff'),
       url('comicbd.otf'),
       url('comicbd.ttf'); 
}

Das ist ein Bug, der sich im IE bis zur Version 8 durchzieht. Bei mehreren Quellangaben für verschiedene Schrifttypen wird das von unserem Lieblingsbrowser falsch interpretiert und der schickt dann eine 404-Meldung (Not Found) an den Server. Mit dem Lattenzaun (#) gaukelt man dem IE dann vor, dass der Rest eine Art von Parameterkette ist.

4. format

Ohne die Angabe des Schriftformats ist der IE doch tatsächlich so dreist und versucht, alle Schriften herunter zu laden. Mit der format-Angabe verhindert man das wohl.

@font-face {
  font-family: "Comic Sans MS Fett";
  src: url('comicbd.eot#iefix') format('embedded-opentype'),
       url('comicbd.woff') format('woff'),
       url('comicbd.otf') format('opentype'),
       url('comicbd.ttf') format('truetype'); 
}

5. Meine Empfehlung

Leider treten diverse Fehlverhalten des IE nur in bestimmten Kombinationen auf. Da ich aber keine Lust habe, das bis ins letzte Detail auszuklamüsern, zeige ich euch eine Lösung, die mich bis jetzt noch nie im Stich gelassen hat.

@font-face {
  font-family: "Comic Sans MS Fett";
  src: url('comicbd.eot') format('embedded-opentype');
  src: url('comicbd.eot#iefix') format('embedded-opentype'),
       url('comicbd.woff') format('woff'),
       url('comicbd.otf') format('opentype'),
       url('comicbd.ttf') format('truetype'); 
}

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt