1. Startseite
  2. »
  3. Allgemeine Themen & Trends
  4. »
  5. IT
  6. »
  7. CSS font – alles über die Schriftarten

CSS font – alles über die Schriftarten

IT
CSS font

CSS font – alles über die Schriftarten

Mit CSS kannst Du ganz einfach das Design Deiner Websiten-Inhalte gestalten. Als Webdesigner oder -entwickler wirst Du früher oder später mit dem Schriftarten-Management in CSS konfrontiert werden. Ob es darum geht, einen bestimmten Zeichensatz zu verwenden, Fonts zu verkleinern oder hervorzuheben – bei der Schriftauswahl in CSS sind Deiner Kreativität keine Grenzen gesetzt. Wir erläutern Dir die Grundlagen der CSS-Schriftarten und zeigen Dir, wie Du sie anwenden kannst.

Arbeiten an Website

Die Eigenschaften von CSS im Überblick

CSS hat eine Reihe von Eigenschaften, die es ermöglichen, die Schriftarten auf Deiner Webseite anzupassen. Die wichtigsten davon sind die Folgenden:

font-family:

Hiermit legst Du die Schriftart fest, die Du verwenden möchtest. Du kannst eine einzelne Schriftart angeben oder eine Liste von Schriftarten, die der Browser durchlaufen soll, bis er eine Schriftart findet, die auf Deinem Computer installiert ist.

font-style:

Mit font-style legst Du fest, ob die Schrift kursiv, fett oder normal angezeigt werden soll. Man unterscheidet hier zwischen italic, oblique und normal. Italic bietet die Kursivform, während oblique ein geneigter Schriftschnitt ist. Der Schriftschnitt normal ist der Standardwert und derjenige, den Du in den meisten Texten siehst. Je nach Länge des Textes wird lieber die kursive oder schräggestellte Form verwendet.

Beispiel:

.oblique { font-style: oblique; }

font-variant:

Hiermit bestimmst Du, ob die Schrift klein geschrieben oder normal angezeigt werden soll. Sie umfasst Eigenschaften wie font-variant-ligatures und font-variant-alternates. Soll die Schrift kleingeschrieben werden, verwendet man „small-cups“.

Beispiel:

.small-caps { font-variant: small-caps; }

font-weight:

Mit font-weight kann die Schrift dicker oder normal angezeigt werden. Es handelt sich hier also um die Strichstärke. Möglich sind absolute und relative Bezeichnungen: lighter (dünner), normal, bold (fett), bolder (fetter) und eine Zahl von 1 bis 1000.

Beispiel:

.bolder { font-weight: bolder; }

font-size:

Hiermit legst du die Schriftgröße fest. Möglich sind verschiedenste Angaben in Zahlen, Prozentwerten oder Pixeln. Relative Größen werden mit em oder ex gekennzeichnet. Darunter small (klein), medium (mittel), large (groß), xxx-large (riesig), smaller (kleiner), 20px, 14pt, 110%.

Beispiel:

.larger { font-size: larger; }

line-height:

Mit line-height bestimmst Du die Zeilenhöhe, sodass der Text besser lesbar gemacht wird. Angegeben werden kann dies in em oder ohne Maßeinheit, zum Beispiel 1.8em oder 1.9. Auch Prozentangaben sind möglich.

Beispiel:

.percent { line-height: 140%; }

Außerdem nützlich

letter-spacing:

So legst Du den Zeichenabstand fest.

text-decoration:

Soll die Schrift unterstrichen, durchgestrichen oder normal angezeigt werden? Dann verwende text-decoration.

text-transform:

Die Schrift kann mittels text-transform in Groß- oder Kleinbuchstaben angezeigt werden.

Schriftarten

Die meisten Browser bieten eine Reihe von Standard-Schriftarten an, die Du verwenden kannst. Wird eine Schrift nicht festgelegt, verwendet der Browser die Standardschriftart, die bei ihm bereits voreingestellt ist. Das ist je nach Gerät anders. Auf dem Desktop ist es meist Times New Roman, auf Apple-Geräten Helvetica Light und bei Android Roboto.

Es gibt zwei Arten von Schriftarten, die in CSS angegeben werden können: Serifen-Schriftarten und Sans-Serif-Schriftarten. Die am häufigsten verwendeten sind Times New Roman, Arial, Helvetica, Verdana, Tahoma und Courier New.

Beispiele für font-family

Aussehen kann so etwas folgendermaßen:

.selektor1 { font-family: Arial; }

Das HTML-Pendant dazu wäre:

<p class="selektor1">Text mit Schriftart Arial;</p>

Zu beachten ist, dass sowohl Times New Roman als auch Courier New in Gänsefüßchen („) gesetzt werden müssen, da sie Leerzeichen innerhalb des Namens besitzen.

Möchtest Du, dass nach der Wunsch-Schriftart die nächstgewählte eine bestimmte ist, kannst Du das ebenfalls einstellen. Man spricht hier von der sogenannten @font-face-Regel. Ein Beispiel wäre:

.selektor { font family: Helvetica, Verdana }

Jetzt wird Dein Browser nach Helvetica Verdana verwenden, sollte ersteres nicht darstellen können.

Generische Schriftarten

Feststehende generische Schriftarten sind:

  • serif
  • sans-serif
  • cursive
  • fantasy
  • monospace
  • emoji
  • math
  • und weitere

Sie sollte am besten hinten angehängt werden:

.serif { font-family: serif; }

Beispiel für CSS fonts

So kann ein CSS aussehen:

p { font: oblique small-caps normal 2.5em/150% Helvetica,Courier,cursive; } 

Und nochmal zusammengefasst:

  • oblique: font-style
  • small-caps: font-variant
  • normal: font-weight
  • 2.5em: font-size
  • 150%: line-height
  • Helvetica: Wunschschrift
  • Courier: 2. Wahl
  • cursive: Schriftfamilie

CSS font in Kurzform

CSS font vereint mehrere Eigenschaften der Schrift, darunter: Schriftart (font-family), Schriftgröße (font-size), Schriftstil (font-style), Schriftstärke (font-weight), Groß- und Kleinschreibung (font-variant) sowie Zeilenhöhe (line-height). Festlegen kannst Du außerdem, welche Schriftart nach Deiner bevorzugten verwendet werden soll.

Möchtest Du noch mehr über CSS erfahren? Pimpe Deine Website auf mit der richtigen Farbgebung (CSS Color), dem passenden Hintergrund (CSS Background) und Animationen (CSS Animation)!

FAQ zum Thema CSS font

Was ist CSS font?

CSS font vereint alle Eigenschaften der Schrift in einer Regel: font-family, font-size, font-weight, font-variant und line-height.

Wie kann man die Schrift mit CSS fett machen?

Fett bekommst Du die Schrift mit bold oder bolder als Zusatz.

Welche generischen Schriftarten gibt es?

Es gibt eine große Vielzahl, darunter cursive, fantasy, serif und sans-serif.

Ähnliche Beiträge