CSS-Schriftarten


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen


Die Wahl der richtigen Schriftart für Ihre Website ist wichtig!


Die Auswahl der Schriftart ist wichtig

Die Wahl der richtigen Schriftart hat einen großen Einfluss darauf, wie die Leser ein Erlebnis erleben Webseite.

Die richtige Schriftart kann Ihrer Marke eine starke Identität verleihen.

Es ist wichtig, eine gut lesbare Schriftart zu verwenden. Die Schriftart fügt hinzu Wert für Ihren Text. Wichtig ist auch die Wahl der richtigen Farbe und Textgröße für die Schriftart.


Generische Schriftfamilien

In CSS gibt es fünf generische Schriftfamilien:

  1. Serifen-Schriftarten haben einen kleinen Strich an den Rändern jedes Buchstabens. Sie vermitteln ein Gefühl von Formalität und Eleganz.

  2. Sans-serif-Schriftarten haben klare Linien (keine kleinen Striche). Sie sorgen für einen modernen und minimalistischen Look.

  3. Monospace-Schriftarten - hier haben alle Buchstaben die gleiche feste Breite. Sie erzeugen einen mechanischen Look.

  4. Kursive Schriftarten imitieren die menschliche Handschrift.

  5. Fantasy-Schriftarten sind dekorative/verspielte Schriftarten.

Alle verschiedenen Schriftnamen gehören zu einer der generischen Schriftfamilien.


Unterschied zwischen serifen- und serifenlosen Schriftarten

Hinweis: Auf Computerbildschirmen gelten serifenlose Schriftarten als leichter lesbar als serifenlose Schriftarten.


Einige Schriftartbeispiele

Generic Font Family Examples of Font Names
Serif Times New Roman
Georgia
Garamond
Sans-serif Arial
Verdana
Helvetica
Monospace Courier New
Lucida Console
Monaco
Cursive Brush Script MT
Lucida Handwriting
Fantasy Copperplate
Papyrus


Die CSS-Eigenschaft „font-family“.

In CSS verwenden wir die Eigenschaft font-family, um die Schriftart eines Textes anzugeben.

Hinweis: Wenn der Schriftname aus mehr als einem Wort besteht, muss er in Anführungszeichen gesetzt werden, z. B. „Times New Roman“.

Tipp: Die Eigenschaft font-family sollte mehrere Schriftartnamen als „Fallback“-System enthalten. um maximale Kompatibilität zwischen Browsern/Betriebssystemen zu gewährleisten. Beginnen Sie mit der gewünschten Schriftart und enden Sie mit einer generischen Familie (um das zu lassen Der Browser wählt eine ähnliche Schriftart in der generischen Familie aus, sofern keine anderen Schriftarten vorhanden sind verfügbar). Die Schriftartnamen sollten durch Komma getrennt werden. Lesen Sie mehr über Fallback-Schriftarten im nächsten Kapitel.

Beispiel

Geben Sie verschiedene Schriftarten für drei Absätze an:

 .p1 {
  font-family: "Times New Roman", Times, serif;
}

  .p2 {
  font-family: Arial, Helvetica, sans-serif;
}

  .p3 {
  font-family: "Lucida Console", "Courier New", monospace;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
.p1 {
  font-family: "Times New Roman", Times, serif;
}

.p2 {
  font-family: Arial, Helvetica, sans-serif;
}

.p3 {
  font-family: "Lucida Console", "Courier New", monospace;
}
</style>
</head>
<body>

<h1>CSS font-family</h1>
<p class="p1">This is a paragraph, shown in the Times New Roman font.</p>
<p class="p2">This is a paragraph, shown in the Arial font.</p>
<p class="p3">This is a paragraph, shown in the Lucida Console font.</p>

</body>
</html>