CSS font - Schrift mit CSS formatieren

Auf Websites gehören Texte zu den am meisten verwendeten Inhalten. Damit sie für die Besucher gut lesbar sind, muss die Schrift auf vielfältiger Art und Weise formatiert werden. Früher wurde die Formatierung direkt im HTML-Quellcode über den Tag <font> vorgenommen. Diese Methode ist aber mittlerweile deprecated und man sollte die Formatierung nur noch mit CSS vornehmen. Den Entwicklern wird in CSS eine Reihe von Möglichkeiten geboten, um die Schrift ansprechend zu gestalten. Hierfür werden in der Regel die folgenden Eigenschaften verwendet.

Ab CSS3

  • font-size-adjust (Nachjustierung der Schrift)
  • font-stretch (Strecken des Textes)

Daneben kann man mit @font-face Schriften vom Server laden und mit line-height die Zeilenhöhe angeben.

Verschiedene Schriften

Shorthand-Eigenschaft für die Schrift - font

Damit man mehrere Eigenschaften nicht einzeln angeben muss, sind in CSS einige Shorthand-Eigenschaften vorhanden, die dafür gedacht sind, um die Werte mehrerer Eigenschaften auf einmal in Kurzform anzugeben. Um in CSS mehrere Angaben für die Schrift zu machen, kann man die Eigenschaft font verwenden. Damit werden die Werte für die folgenden Eigenschaften angegeben.

  • font-style
  • font-variant
  • font-weight
  • font-size
  • line-height
  • font-family

Bei der Verwendung der Shorthand-Eigenschaft ist zu beachten, dass die Reihenfolge eingehalten werden muss. Die ab CSS3 hinzugekommenen Eigenschaften font-stretch und font-size-adjust können nicht mit angegeben werden. Man kann sie aber separat verwenden. Auch wenn die Angabe von font-size-adjust innerhalb der Kurzform nicht möglich ist, wird der Wert hierfür ebenfalls auf den Standardwert gesetzt, wenn man font verwendet. Nachfolgend ist anhand eines Beispiels die Syntax abgebildet.

CSS-Code mit font

Standardwerte beim Auslassen von Werte

Außer den Werten für font-size und font-family sind alle Angaben optional und können auch ausgelassen werden. In dem Fall wird für sie der Standardwert normal gesetzt, was normalerweise keine gravierenden Auswirkungen hat.

Setzen auf die Systemschriftart über font

Die Eigenschaft font hat die Besonderheit, dass sie für zwei Zwecke verwendet werden kann. Einerseits kann man font verwenden, um in Kurzform die Schriftformatierung mit mehreren Werten anzugeben und andererseits eine Systemschriftart festzulegen. Hierbei kann man die folgenden Werte angeben.

  • caption (Schrift von Kontrollelementen wie z.B. Schaltflächen)
  • small-caption (Schrift von kleinen Kontrollelementen)
  • icon (Schrift von Icon-Beschriftungen)
  • menu (Schrift von Menüs)
  • message-box (Schrift von Dialogboxen)
  • status-bar (Schrift der Statusleiste)

Diese Werte können nur einzeln verwendet und nicht mit den anderen Eigenschaften gemischt werden. Nachfolgend ist ein Beispielcode sowie die Abbildung von der Darstellung im Browser.

.selektor1 {
font: 16px Arial;
}

.selektor2 {
font: bold 16px Arial;
}

.selektor3 {
font: small-caps bold 16px Arial;
}

.selektor4 {
font: italic small-caps bold 16px Arial;
}

.selektor5 {
font: caption;
}

.selektor6 {
font: small-caption;
}

.selektor7 {
font: icon;
}

.selektor8 {
font: menu;
}

.selektor9 {
font: message-box;
}

.selektor10 {
font: status-bar;
}

p {
margin: 2px;
padding: 5px;
width: 400px;
border: 1px solid #001055;
}
<p class="selektor1">Text beim .selektor1</p>
<p class="selektor2">Text beim .selektor2</p>
<p class="selektor3">Text beim .selektor3</p>
<p class="selektor4">Text beim .selektor4</p>
<p class="selektor5">Text beim .selektor5</p>
<p class="selektor6">Text beim .selektor6</p>
<p class="selektor7">Text beim .selektor7</p>
<p class="selektor8">Text beim .selektor8</p>
<p class="selektor9">Text beim .selektor9</p>
<p class="selektor10">Text beim .selektor10</p>
font mit mehreren Beispielen

Für den Fall, dass eine Schriftart nicht beim Besucher nicht verfügbar ist, kann man mehrere Schriftarten angeben. Wählt man eine Schriftart mit einem Leerzeichen im Namen, setzt man den Namen in Anführungszeichen, z.B. "Courier New", Arial, sans-serif. Die Darstellung der Systemschriften ist abhängig vom Browser.