CSS At-Regel: @font-face – Referenz und Beispiel

stylesheet.css · @font-face

At-Regeln gelten für das ganze Stylesheet und haben kein einzelnes Element, an dem sich ein Regler drehen ließe. Das Code-Beispiel weiter unten zeigt die Syntax, der Abschnitt Erläuterungen die Wirkung.

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.

Beschreiben oder mitliefern

Die At-Regel kannte in CSS 2 zwei Wege, und die Seite beschreibt die Ausgangslage dafür: Schrift im Web war das, was auf dem Gerät des Lesers lag. Der erste Weg bestand darin, eine Schrift so genau zu beschreiben, dass das Anwenderprogramm aus dem Vorrat eine passende auswählen oder eine ähnliche nachbilden konnte. Dafür gibt es die zahlreichen Deskriptoren für Breite, Gewicht, x-Höhe und Zeichenvorrat.

Der zweite Weg war der Verweis auf eine Datei. Er ist der einzige, der sich durchgesetzt hat, und zwar sehr viel später, als diese Seite entstanden ist.

Das Nachbilden einer Schrift aus ihrer Beschreibung ist dagegen verschwunden. Der Gedanke setzte einen Vorrat an Schriften und ein Verfahren voraus, aus Kennzahlen eine ähnliche Schrift zu erzeugen; beides gab es nicht in verlässlicher Form.

Was daraus geworden ist

Die At-Regel selbst ist geblieben und trägt denselben Namen, ihre Bedeutung hat sich aber verengt: Sie beschreibt heute im Kern, unter welchem Namen eine Schriftdatei ansprechbar ist, wo sie liegt und für welchen Schnitt sie steht.

Der letzte Punkt ist der, an dem die meisten Einbindungen scheitern. Jeder Schnitt einer Familie braucht eine eigene Regel mit denselben Namen und den zu ihm passenden Angaben für Gewicht und Neigung. Fehlt eine, erzeugt das Anwenderprogramm den Schnitt rechnerisch, was an fetter oder kursiver Schrift sichtbar wird.

Hinzugekommen sind Angaben, die es damals nicht brauchte, weil Schriften nicht geladen wurden: die Einschränkung auf bestimmte Zeichenbereiche, damit nur geladen wird, was vorkommt, und die Steuerung dessen, was während des Ladens dargestellt wird.

Geblieben ist außerdem die Grundidee, die die Seite beschreibt: Die At-Regel beschreibt eine Schrift, sie wendet sie nicht an. Verwendet wird die Schrift erst dort, wo ihr Name in einer Schriftliste auftaucht. Wer eine Schrift einbindet und im Stylesheet nirgends nennt, lädt sie nicht.

Besonderheiten im Medientyp `handheld`

Diese At-Regel ist nicht Teil des Standards CSS Mobile Profile 1.0 und wird auch durch keinen Browser eines Mobilgerätes bisher umgesetzt.

Ausblick

Einen vollständigen Einblick gibt das CSS-3-Modul Webfonts.

Verwendete Standards

Dieser CSS-Referenz liegen folgende Spezifikationen zugrunde: CSS 1, CSS 2.1 CR und CSS Mobile.

At-Regel @font-face