Websiteentwicklung: CSS: Schriftart

Auswahl der Schriftart - font-family

Mit Hilfe der Eigenschaft font-family läßt sich angeben, welche Schriftart zur Präsentation in visuellen Medien gewünscht ist.

Der Wert von font-family ist eine Liste von Namen von Schriftarten oder Schlüsselwörtern für generische Schriftfamilien oder das Schlüsselwort 'inherit'. Die einzelnen Listenpunkte sind mit Komma voneinander zu separieren, optionale, zusätzliche Leerzeichen sind auch erlaubt. Namen können oder müssen je nach den verwendeten Zeichen in Anführungszeichen gesetzt werden, wobei einfache (') und doppelte (") Anführungszeichen zulässig sind. Schlüsselwörter dürfen nicht in Anführungszeichen gesetzt sein. Zulässig für Namen, die nicht in Anführungszeichen gesetzt werden müssen, sind solche, die aus Buchstaben oder Ziffern bestehen [a-zA-Z0-9] , zusätzlich den Zeichen '-' und '_' und Zeichen ab dem Zeichen U+00A0. Sie dürfen aber nicht mit einer Zahl beginnen oder einem '-' gefolgt von einer Zahl oder mit zwei '-'. Insbesondere sind also zum Beispiel Namen, die Leerzeichen enthalten, immer in Anführungszeichen zu setzen. Ist der Name einer Schriftart gleich einem der vordefinierten Schlüsselwörter, ist der Namen ebenfalls immer in Anführungszeichen zu setzen.

Die Eigenschaft ist anwendbar auf alle Elemente und wird auch vererbt. Darstellungsprogramme für visuelle Medien müssen immer mindestens eine Schriftart verfügbar haben, der Initialwert ist dann der Name einer verfügbaren Schriftart und ist damit vom Darstellungsprogramm abhängig.

Die Liste wird vom Darstellungsprogramm durchgegangen, im Zweifelsfalle für jeden einzelnen, darzustellenden Glyphen, ob eine Schriftart mit dem Namen verfügbar ist. Ist das der Fall, wird diese verwendet, sonst wird mit dem nächsten Namen weitergesucht. Ist die Liste durchgearbeitet und keine Schriftart gefunden, die zu den angegebenen Namen paßt, so ist die zu verwendende Schriftart undefiniert und es liegt am Darstellungsprogramm, ob eine andere Schriftart zu Präsentation verwendet wird oder die Glyphen gar nicht oder mit Platzhaltern präsentiert werden. Fortgeschrittene Programme können nach erfolglosem Durchgehen der Liste auch ihnen bekannte Namen in der Liste identifizieren und stattdessen eine ähnliche, verfügbare Schriftart auswählen. Das Zeichen für einen nicht verfügbaren Glyphen ist zumeist ebenfalls in einer Schriftart definiert, also auch von der verwendeten abhängig.

Schlüsselwörter für generische Schriftfamilien

Schriftartfamilien werden in fünf Kategorien eingeteilt, den sogenannten generischen Schriftfamilien, welche durch Schlüsselwörter angegeben werden können.

serif haben Serifen und sind proportional. Bei proportionalen Schriftarten haben die Buchstaben unterschiedliche Breiten. So ist ein "m" breiter als ein "i". Serifen sind weitere Verzierungen der Schriftarten. Beispielschriftarten: Times, Garamond
sans-serif haben keine Serifen sind aber ebenfalls proportionale Schriftarten. Beispielschriftarten: Arial, Geneva, Helvetica, Tahoma, Verdana
monospace können Serifen aufweisen, sind aber keine proportionalen Schriftarten. Das heißt, jeder Buchstabe nimmt den gleichen Platz ein wie ein anderer. Auch als Schreibmaschinenschrift bekannt. Beispielschriftarten: Courier, Lucida Console
cursive sind Schriftarten, die Handschriften ähneln. Beispielschriftarten: Comic Sans, Lucida Handwriting
fantasy sind Schriftarten, die in keines der anderen vier Muster passen.

Darstellungsprogramme für visuelle Medien müssen für jedes Schlüsselwort eine Schriftart verfügbar haben (wobei nicht ausgeschlossen ist, dass etwa per Voreinstellung des Nutzers) immer dieselbe Schriftart verwendet wird oder auch eine mit anderen als den angegebenen Charakteristika. Jedenfalls ist sichergestellt, dass ein Text überhaupt irgendwie dargestellt wird, wenn die Werte-Liste von font-family mit einer generischen Schriftfamilie endet.

Namen und Schriftarten

In CSS werden sogenannte Schriftartfamilien verwendet. Diese Schriftartfamilien können jeweils aus diversen einzelnen Schriftarten bestehen, unten denen mit weiteren Eigenschaften ausgewählt werden kann.

So hat zum Beispiel die Schriftartfamilie Arial die Schriftarten: Arial Bold, Arial Italic oder Arial Bold Italic.

Namen einiger häufig verwendeter Schriftartfamilien sind:

Times
Arial
Helvetica
Verdana
Courier
Comic

Beispiele für Familien mit einer freien Lizenz, die also prinzipiell überall verfügbar gemacht werden können, aber trotzdem nicht notwendig überall installiert sind:

Bitstream Vera
DejaVu
Ubuntu

weitere sind zum Beispiel Linux Libertine, Linux Biolinum, Gentium, Avocado, Liberation, Junicode, Cardo, Computer Modern.

Schriftarten mit freier Lizenz (GNU):

Nimbus Roman No9 L
Nimbus Sans L

Ein Darstellungsprogramm kann für seine eigene Stilvorlage gezielt Schriftarten auswählen, die verfügbar sind. Auch ein Nutzer kann dies für seine Stilvorlage tun. Der Autor eines Dokumentes hat allerdings kaum Kontrolle darüber, welche Schriftarten beim Nutzer verfügbar sind. Die Dateien mit den Schriftarten unterliegen dem Urheberrecht, was zur Folge hat, dass nicht bei jedem Nutzer jede Schriftart verfügbar ist, weil nicht jeder eine Lizenz hat, die Schriftart zu verwenden. Um keine Lizenzgebühren an andere zahlen zu müssen, haben Konzerne wie Microsoft oft Schriftarten entwickelt, die ähnlich aussehen, wie die Schriftarten, die von anderen unter einer Lizenz stehen und nutzen sie mit einer eigenen Lizenz, was dann zur Folge hat, dass Kunden von Microsoft diese Schriftarten verfügbar haben, nicht aber zwangsläufig andere, die keine passende Lizenz haben. Daneben können die Schriftarten auch in verschiedenen Formaten vorliegen und aus ähnlichen Lizenzgründen kann es Darstellungsprogrammen nicht möglich oder erlaubt sein, bestimmte Formate für Schriftartendateien zu dekodieren, was dann zur Folge hat, dass auch deswegen Schriftarten nicht verfügbar sind.

Von daher ist es immer wichtig, als letzte Option eine generische Schriftfamilie anzugeben und sich nicht darauf zu verlassen, dass für die ansonsten angegebenen Namen von Schriftarten auch exakt jeweils die gewünschte Schriftart verfügbar ist.

Beispiele zu font-family

Gemeinhin gelten Schriften ohne Serifen als gut lesbar auf Monitoren oder allgemeiner Geräten mit geringerer Auflösung, während Schriften mit Serifen gut geeignet sind für gedruckte Texte und hohe Auflösung. Ein guter Ansatz für eine Ausgabe einfach auf dem Bildschirm ist also:

body {
font-family: sans-serif
}

oder für die Druckausgabe entsprechend:

body {
font-family: serif
}

Werden in einer Liste dann Namen von bestimmten Schriftarten angegeben, ist es zumeist sinnvoll, dass sie wenigstens der gleichen generischen Schriftfamilie angehören, also etwa:

div.menu {
font-family: 'Bitstream Vera Sans', 
             'DejaVu Sans', 
             Helvetica, 
             Arial, 
             sans-serif 
}

oder

div.menu {
font-family: 'Bitstream Vera Serif', 
             'DejaVu Serif', 
             'Times New Roman', 
             Times, 
             Garamond, 
             serif 
}

Regel @font-face

Die Regel beschreibt die Eigenschaften einer Schriftfamilie und stellt insbesondere eine Möglichkeit bereit, Schriftartendateien zu referenzieren.

Die allgemeine Syntax der Regel sieht wie folgt aus: Sie beginnt mit der Zeichenfolge '@font-face {' und endet mit dem Zeichen '}' In dem mit geschweiften Klammern gekennzeichnete Block können die Bezeichner notiert werden, die im folgenden erläutert werden.

Minimales Beispiel zur Referenzierung genau einer Schriftart ohne weitere Angaben:

@font-face {  
        /* der Schriftart einen Namen geben: */
        font-family: "Meiner"; 
        /* Schriftartendatei referenzieren und Format angaben: */
        src: url("fonts/meiner.svg#F") format(svg)
}

Entsprechend wird dann bei der Eigenschaft font-family der Wert des Bezeichners font-family verwendet, um die Schriftart zu nutzen:

body {font-family: 'Meiner', sans-serif}

Anmerkung: Aus verschiedenen Gründen ist es dringend zu empfehlen, nur lokale Quellen mit relativen URIs als Schriftartendateien zu verwenden. Bei externen Dateien hat der Autor etwa keinerlei Kontrolle über Änderungen. Die Verwendung einer relativen URI schützt ferner die Privatsphäre der Nutzer der Seite. Schriftartendateien unterliegen auch oft speziellen Lizenzen, welche die Nutzung einschränken können. Es ist also immer sicherzustellen, dass im jeweiligen Zusammenhang die Verwendung auch erlaubt ist.

Bezeichner von @font-face

Die für @font-face verfügbaren Bezeichner lehnen sich teilweise an gleichnamige Eigenschaften an, erlauben aber auch darüberhinaus eine Einordnung. Die Bezeichnier sind: font-family, font-style, font-weight,font-variant, font-stretch, font-size, unicode-range, units-per-em, src, panose-1, stemv, stemh, slope, cap-height, x-height, accent-height, ascent, descent, widths, bbox, definition-src, baseline, centerline, mathline, topline.

Die Bedeutungen sind die gleichen wie bei den entsprechenden Eigenschaften, mit denen eine Schriftart ausgewählt wird. Nur dass bei dieser Regel nicht ausgewählt wird, sondern die im Element definierten Glyphen einer bestimmten Schriftart mit entsprechenden Eigenschaften zugeordnet werden und dann wiederum als solche für Textelemente ausgewählt werden kann.

font-family

Angabe der Schriftfamilie.
Wert entsprechend der gleichnamigen Eigenschaft. Sind mehrere Schriftfamilien angegeben, treffen alle auf die Glyphen zu.

font-style

Angabe des Stiles.
Mögliche Werte sind entweder 'all' als Voreinstellung für alle oder eine Liste mit den möglichen Werten 'normal', 'italic', 'oblique'. Was angegeben ist, trifft jeweils auf den definierten Zeichensatz zu.

font-variant

Angabe der Variante.
Möglicher Wert ist eine Liste mit den möglichen Werten 'normal', der Voreinstellung und 'small-caps'.

font-weight

Angabe des Gewichtes.
Möglicher Wert ist entweder 'all', die Voreinstellung für alle Gewichte, oder eine Liste von Gewichten mit den möglichen Werten 'normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900'.

font-stretch

Angabe der Dehnung.
Möglicher Wert ist entweder 'all' oder eine Liste von Dehnungen mit den möglichen Werten 'normal', 'ultra-condensed', 'extra-condensed', 'condensed', 'semi-condensed', 'semi-expanded', 'expanded', 'extra-expanded', 'ultra-expanded'. Voreinstellung ist 'normal'.

font-size

Angabe der Schriftgröße.
Möglicher Wert ist entweder 'all' oder eine Liste von absoluten Längen.

unicode-range

Angabe des abgedeckten Unicode-Bereiches. Damit wird vermeiden, dass der Zeichensatz überhaupt geladen wird, wenn nur Zeichen außerhalb des angegebenen Bereiches benötigt werden. Der Wert ist eine Liste von Unicode-Bereichen. Voreinstellung ist 'U+0-7FFFFFFF' (Typisch wird der selbst definierte Zeichensatz nicht all diese Zeichen enthalten, daher ist zu empfehlen, den zutreffenden Bereich korrekt anzugeben).

Ein Bereich wird in der hexadezimalen Schreibweise notiert, für ein Zeichen etwa U+215A Dabei gibt es wiederum verschiedene Möglichkeiten. Zum einen kann ein '?' als Platzhalter für die letzte Ziffer verwendet werden, also zum Beispiel U+215?, das deckt dann alle Zeichen von U+2150 bis U+215F ab. Auch zwei Fragezeichen sind erlaubt, also zum Beispiel U+00?? geht dann von U+0000 bis U+00FF (Latin-1). Größere Bereiche können mit zwei Nummern verbunden mit einem Bindestrich notiert werden, Beispiel: U+15C00-15FFF entspricht dem Bereich U+15C00 bis U+15FFF (aztekisch).

units-per-em

Angabe, wievielen Einheiten in lokalen Koordinaten die Einheit em entspricht.
Der Wert ist eine Zahl. Die Angabe ist bei Verwendung vieler anderer Attribute erforderlich, damit diese einen Sinn ergeben.

src

Der Bezeichner ist erforderlich und ermöglicht es, eine Schriftartendatei zu referenzieren. Der Wert ist eine Liste mit Kommata als Separatoren. Listenpunkte sind Referenzen zu Schriftartendateien oder alternativ der Name einer Schriftart (wie bei der Eigenschaft font-family mit gleicher Funktion, eine Schriftart zu referenzieren, die beim Nutzer gegebenenfalls bereits installiert ist). Referenziert wird durch die Angabe einer URI/IRI der Schriftartendatei in der üblichen Notation für URI/IRI. Optional kann darauf ein Hinweis auf das verwendete Format notiert werden.

Der Hinweis beginnt mit der Zeichenkette 'format(' und endet mit ')'. Dazwischen steht eine Liste mit Kommata als Separatoren. Ein Listenpunkt ist jeweils eine Zeichenkette, die für ein bestimmtes Format steht. Bekannt sind zum Beispiel folgende Zeichenketten:

svg: SVG-Zeichensatz, typische Dateiendungen: .svg, .svgz
type-1: PostScript Type 1, typische Dateiendungen: .pfb, .pfa
truetype: TrueType, typische Dateiendung: .ttf
truetype-gx: TrueType mit GX-Erweiterungen, typische Dateiendung: .ttf
truetype-aat: TrueType mit vorgeschrittenen Erweiterungen, typische Dateiendung: .ttf
opentype: OpenType, typische Dateiendungen: .ttf, .otf
embedded-opentype: Embedded OpenType, typische Dateiendung: .eot
truedoc-pfr: TrueDoc Portable Font Resource, typische Dateiendung: pfr
speedo: Speedo
intellifont: Intellifont

panose-1

Angabe der PANOSE-Nummern.
Dabei handelt es sich um Klassifikationsnummern für 'TrueType', insgesamt 10 Zahlen, welche die Schlüsseleigenschaften einer lateinischen Schrift festlegt. Der Wert besteht auch zehn ganzen Zahlen, jeweils durch Leerzeichen getrennt. Die Voreinstellung sind zehn Nullen, was bedeutet, dass jeder Zeichensatz zu der Nummernkombination passt.

stemv

Angabe der vertikalen Stengelbreite (englisch: stem).
Gemeint ist damit eine typische Breite einer vertikalen Struktur bei den Glyphen, zum Beispiel die Breite des vertikalen Stiches von 'L', 'I', 'd', 'p' etc.

Wenn dies Attribut verwendet wird, muss auch units-per-em' verwendet werden.

Der Wert ist eine Zahl. Voreinstellung ist undefiniert. Ist der Wert undefiniert, wird das Attribut ignoriert.

stemh

Angabe der horizontale Stengelbreite (englisch: stem).
Gemeint ist damit eine typische Breite einer horizontalen Struktur bei den Glyphen, zum Beispiel die Breite von Serifen oder des horizontalen Stiches von 'H', 'L', '-', 'z', 't' etc.

Wenn dies Attribut verwendet wird, muss auch units-per-em' verwendet werden.

Der Wert ist eine Zahl. Voreinstellung ist undefiniert. Ist der Wert undefiniert, wird das Attribut ignoriert.

slope

Angabe des Winkels von vertikalen Strukturen.
Sind vertikale Strukturen in einem Zeichensatz nicht exakt vertikal, sondern gekippt, etwa beim Typ 'italic' oder 'oblique'. Es handelt sich um einen Winkel entgegen dem Uhrzeigersinn von der Vertikalen aus zur vertikalen Struktur

Der Wert ist eine Zahl. Die Voreinstellung ist 0.

cap-height

Angabe der typischen Höhe von großen Buchstaben, von der Basislinie aus gemessen.
Sofern vorhanden ist das zum Beispiel die Höhe von 'M' oder 'H'.

Wenn dieser Bezeichner verwendet wird, muss auch units-per-em' verwendet werden.

Der Wert ist eine Zahl. Voreinstellung ist undefiniert. Ist der Wert undefiniert, wird das Attribut ignoriert.

x-height

Angabe der typischen Höhe von kleinen Buchstaben, von der Basislinie aus gemessen.
Sofern vorhanden ist das zum Beispiel die Höhe von 'x' oder 'a'. Die Größe ist insbesondere wichtig für die Eigenschaft font-size-adjust, weil die Berechnung des Anpassungsfaktors auf dieser Größe basiert. Daher sollte der Wert angegeben werden.

Wenn dieser Bezeichner verwendet wird, muss auch units-per-em' verwendet werden.

Der Wert ist eine Zahl. Voreinstellung ist undefiniert. Ist der Wert undefiniert, wird das Attribut ignoriert.

ascent

Angabe der maximalen Höhe von Buchstaben, von der Basislinie aus gemessen, aber ohne Akzentzeichen.
Sofern vorhanden ist das zum Beispiel die Höhe von 'l', 'b' oder 'h'.

Wenn dieser Bezeichner verwendet wird, muss auch units-per-em' verwendet werden.

Der Wert ist eine Zahl. Voreinstellung ist undefiniert. Ist der Wert undefiniert, wird das Attribut ignoriert.

descent

Angabe der maximalen Tiefe von Buchstaben, von der Basislinie aus gemessen, aber ohne Akzentzeichen.
Sofern vorhanden ist das zum Beispiel der Teil unter der Grundlinie von 'j', 'g' oder 'y'.

Wenn dieser Bezeichner verwendet wird, muss auch units-per-em' verwendet werden.

Der Wert ist eine Zahl. Voreinstellung ist undefiniert. Ist der Wert undefiniert, wird das Attribut ignoriert.

accent-height

Angabe der Höhe von Zeichen mit Akzent, im Koordinatensystem des Zeichensatzes angegeben.

Der Wert ist eine Zahl. Ist der Bezeichner nicht angegeben, wird der Wert von accent angenommen. Wenn dieser Bezeichner verwendet wird, muss auch units-per-em' verwendet werden.

widths

Angabe der Breite von Glyphen.
Der Wert ist eine Liste von Kombinationen von optionalen Unicode-Bereichen und einer Zahl oder mehreren Zahlen. Der Listenseparator ist ein Komma.

Die Notation des Unicode-Bereiches ist bereits für das Attribut unicode-range beschrieben. Ist kein Bereich für eine Zahl angegeben, wird U+0-7FFFFFFF angenommen.

Wenn dieser Bezeichner verwendet wird, muss auch units-per-em' verwendet werden. Wenn nicht genug Glyphenbreiten angegeben sind, gilt für die restlichen Glyphen der letzte Wert. Sind zuviele angegeben, werden die überschüssigen Breiten ignoriert.

Beispiel:

widths="U+4E00-4E1F 1736 1874 1692"

oder

widths="U+1A?? 1490, U+215? 1473 1838 1927 1684 1356 1792
    1815 1848 1870 1492 1715 1745 1584 1992 1978 1770"

bbox

Angabe des maximalen begrenzenden Rechtecks.
Das begrenzende Rechteck ist das kleinste (horizontal und vertikal) ausgerichtete Rechteck, welches jeweils einen jeden Glyphen des Zeichensatzes komplett umschließt.

Der Wert besteht aus einer Liste von vier Zahlen, jeweils mit einem Komma als Separator. Die erste Zahl gibt den x-Wert unten links an, die zweiten den y-Wert unten links, die dritte den x-Wert oben rechts, die vierte den y-Wert oben rechts.

definition-src

Der Wert ist die URI/IRI in der üblichen Notation für eine Resourcen-Datei zur Aufnahme von Bezeichnern. Wird die Schriftart also in mehreren Stilvorlagen mit der Regel @font-face verwendet, so kann man sich damit die wiederholte Angabe der Bezeichner in den verschiedenen Stilvorlagen sparen und braucht nur jeweils auf die Resourcen-Datei verweisen.

baseline

Angabe zur Ausrichtung bezüglich der unteren Grundlinie.
Der Wert ist eine Zahl, die einen Versatz im Koordinatensystem des Zeichensatzes angibt.

Wenn dieser Bezeichner verwendet wird, muss auch units-per-em' verwendet werden.

centerline

Angabe zur Ausrichtung bezüglich der zentralen Grundlinie.
Der Wert ist eine Zahl, die einen Versatz im Koordinatensystem des Zeichensatzes angibt.

Wenn dieser Bezeichner verwendet wird, muss auch units-per-em' verwendet werden.

mathline

Angabe mathematischen Ausrichtung bezüglich der Grundlinie.
Der Wert ist eine Zahl, die einen Versatz im Koordinatensystem des Zeichensatzes angibt.

Wenn dieser Bezeichner verwendet wird, muss auch units-per-em' verwendet werden.

topline

Angabe zur Ausrichtung bezüglich der unteren Grundlinie.
Der Wert ist eine Zahl, die einen Versatz im Koordinatensystem des Zeichensatzes angibt.

Wenn dieser Bezeichner verwendet wird, muss auch units-per-em' verwendet werden.

Zurück zu Schriftformatierungen |

Hoch zu CSS |

Vor zu Schriftgröße