Die Wahl der richtigen Schriftart für Ihre Website 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.
In CSS gibt es fünf generische Schriftfamilien:
Serifen-Schriftarten haben einen kleinen Strich an den Rändern jedes Buchstabens. Sie vermitteln ein Gefühl von Formalität und Eleganz.
Sans-serif-Schriftarten haben klare Linien (keine kleinen Striche). Sie sorgen für einen modernen und minimalistischen Look.
Monospace-Schriftarten - hier haben alle Buchstaben die gleiche feste Breite. Sie erzeugen einen mechanischen Look.
Kursive Schriftarten imitieren die menschliche Handschrift.
Fantasy-Schriftarten sind dekorative/verspielte Schriftarten.
Alle verschiedenen Schriftnamen gehören zu einer der generischen Schriftfamilien.
Hinweis: Auf Computerbildschirmen gelten serifenlose Schriftarten als leichter lesbar als serifenlose Schriftarten.
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 |
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.
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>