CSS 2: `@font-face`

Allgemeines:

Die Möglichkeiten, mit Hilfe der font-Eigenschaften Schriftarten für Websites zu definieren, sind nur sehr begenzt. Es ist praktisch unmöglich, wie im DTP oder Druckwesen eine spezifische Schriftart einzusetzen, die dann für jeden Leser auch so dargestellt wird. In der Praxis sind Webautoren gezwungen, sich auf einige wenige Schriftarten zu beschränken, von denen sie wissen, dass sie auf den meisten Computern installiert sind.

Aus diesem Grund gab es in der Vergangenheit eine Reihe von Versuchen, sogenannte Webfonts zu entwickeln. Allgemein ausgedrückt: die genaue Beschreibung der Schriftarten selbst in die Websites zu integrieren und herunterladbar zu machen. Die bekanntesten Ansätze hierzu waren die durch Netscape unterstützten True-Doc-Schriftarten von Bitstream und WEFT von Microsoft.

Schriftarten sind in der Fontdatenbank des Computers in der Form von Formeln und Parametern gespeichert, aus denen im Bedarfsfall die äußeren Umrisse der Schriftzeichen berechnet werden.

Die Regel `@font-face`

Einen neutralen Lösungsweg versuchte das W3C im Rahmen von CSS 2 zu beschreiten. In dem dort beschriebenen Ansatz dient die Regel @font-face dazu, alle notwendigen Beschreibungen einer Schriftart in einer umfassenden Definition zu vereinigen. Diese Daten werden heruntergeladen und in der Fontdatenbank des Benutzers installiert. Anschließend wird mit Hilfe dieser Daten der Schriftfont am Bildschirm aufgebaut.

Jedoch werden @font-face und alle dazu gehörenden Regeln zur Fontbeschreibung bis heute von keinem Browser unterstützt. Sie wurden deshalb nicht mit nach CSS 2.1 übernommen, sondern gleich im separaten CSS-3-Modul 'Webfonts' zusammengefaßt.

Eine ausreichend genaue Beschreibung dieser Regeln würde den Rahmen dieser Veröffentlichung sprengen und soll deshalb hier nicht unternommen werden.

Syntax:

@font-face "<font-description>";

Komponenten:

<font-description>: Eine Liste von Online-Quellen bzw. Schriftartbeschreibungen.

Code-Beispiel:

@font-face { src: local("Alabama Italic"), url(http://www.fonts.org/A/alabama-italic) format("truetype"); panose-1: 2 4 5 2 5 4 5 9 3 3; font-family: Alabama, serif; font-weight: 300, 400, 500; font-style: italic, oblique; }

Browserunterstützung

: Die At-Regel @font-face wird bisher von keinem Browser unterstützt.

Keine Eigenschaft und kein Selektor stehen in einem Stylesheet für sich allein. In der Praxis kann das Zusammenspiel zwischen verschiedenen Elementen und Selektoren einen nicht zu unterschätzenden Einfluss auf die Fähigkeiten der Browser haben. Bugs treten oft erst durch das Zusammenwirken mehrerer Eigenschaften an unterschiedlichen Elementen auf.