Browser-Kompatibilität von CSS3-Schriftarten

Von Florian Thoma am 13.07.2011 | 0 Kommentare

Tags: CSS3, Schriftart, Browser

Um auf der Webseite CSS3-Schrifarten verwenden zu können, muss jede zu verwendende Schriftart im CSS definiert werden. Um die korrekte Schriftart jedoch in möglichst vielen Browsern korrekt darzustellen, müssen einige Dinge beachtet werden. Im Folgenden wird die Kompatibilität und Verwendung erklärt.

Browser-Kompatibilität

@font-face

Die Definition @font-face wird von folgenden Browsern unterstützt:

• Internet Explorer 4+
• Mozilla Firefox 3.5+
• Google Chrome 4+
• Safari 3.1+
• Opera 10+

Damit sind alle aktuell verwendeten Browser abgedeckt.

Bei den Schriftarten-Dateien ist es mit der Kompatibilität etwas komplizierter:

WOFF-Schriftarten

• Internet Explorer 9+
• Mozilla Firefox 3.6+
• Google Chrome 6+
• Opera 11.1+

OpenType-Schriftarten

• Mozilla Firefox 3.5+
• Google Chrome 4+
• Safari 3.1+
• Opera 10+
• iOS Mobile Safari 4.2+

TrueType-Schriftarten

• Internet Explorer 9+
• Mozilla Firefox 3.5+
• Google Chrome 4+
• Safari 3.1+
• Opera 10+
• iOS Mobile Safari 4.2+

EOT-Schriftarten

• Internet Explorer 4+

SVG-Schriftarten

• Google Chrome 4+
• Safari 3.1+
• Opera 10+
• iOS Mobile Safari 3.2+

Das heisst, dass man in der Praxis WOFF, TrueType (oder OpenType), EOT und SVG Schriftarten verwenden sollte um möglichst viele Browser abzudecken.

Folgende Browser werden jedoch gar nicht unterstützt:

• Firefox < 3.5 (herausgegeben am 30.06.2009, heute verfügbar: 5.0)
• Chrome < 4.0 (herausgegeben am 25.01.2010, heute verfügbar: 12.0)
• Safari < 3.1 (herausgegeben am 18.03.2008, heute verfügbar: 5.0)
• Opera < 10 (herausgegeben am 01.09.2009, heute verfügbar: 11.5)

Je nachdem welche Schriftarten vorhanden sind oder man aus rechtlichen Gründen verwenden darf, wird die Unterstützung recht schwiereig. Wenn beispielsweise nur die Formate WOFF und EOT vorhanden sind, werden folgende Browser nicht unterstützt:

• Opera < 11.1 (herausgegeben am 12.04.2011)
• Safari alle Versionen inkl. iOS mobile Safari
• Chrome < 6.0 (herausgegeben am 02.09.2010)
• Firefox < 3.6 (herausgegeben am 21.01.2010)

Definition

Jede Schriftart wird doppelt mit verschiedenen Schriftarten-Dateien definiert, um die Schriftart in allen Browsern korrekt anzeigen zu können.

Nachfolgend eine Beispiels-Definition einer Schriftart „TestSchriftRegular“:

@font-face {
    /* Diese Deklaration spricht den Internet Explorer an */
    font-family: "TestSchriftRegular";
    src: url("TestSchrift-Regular.eot");
}
@font-face {
    /* Diese Deklaration spricht alle anderen Browser an */
    font-family: "TestSchriftRegular";
    src:    url(//:) format("no404"), 
            url("TestSchrift-Regular.woff") format("woff"), 
            url("TestSchrift-Regular.ttf") format("truetype"), 
            url("TestSchrift-Regular.svg#TestSchriftRegular") format("svg");
    font-weight: normal;
    font-style: normal;
}

Verwendung

Nachdem die obige Definition eingefügt wurde, kann im CSS die definierte Schriftart ganz normal verwendet werden:

h1 {
    font-family: TestSchriftRegular, Arial, sans-serif;
}

Konfiguration

Die Mime-Typen für die Schriftarten-Dateien müssen im Webserver konfiguriert werden.

Folgende Mime-Typen müssen konfiguriert werden:

.woff       application/x-font-woff
.eot        application/vnd.ms-fontobject
.ttf        application/x-font-ttf
.otf        application/x-font-opentype
.svg        image/svg+xml