CSS -Schriftarten
Die Wahl der richtigen Schriftart für Ihre Website ist wichtig!
Schriftauswahl ist wichtig
Die Wahl der richtigen Schriftart hat einen großen Einfluss darauf, wie die Leser eine Website erleben.
Die richtige Schriftart kann eine starke Identität für Ihre Marke schaffen.
Es ist wichtig, eine gut lesbare Schriftart zu verwenden. Die Schriftart wertet Ihren Text auf. Es ist auch wichtig, die richtige Farbe und Textgröße für die Schriftart zu wählen.
Generische Schriftfamilien
In CSS gibt es fünf generische Schriftfamilien:
- Serifenschriften haben einen kleinen Strich an den Rändern jedes Buchstabens. Sie schaffen ein Gefühl von Formalität und Eleganz.
- Sans-Serif- Schriftarten haben klare Linien (keine kleinen Striche angebracht). Sie schaffen einen modernen und minimalistischen Look.
- Monospace- Schriftarten - hier haben alle Buchstaben die gleiche feste Breite. Sie erzeugen einen mechanischen Look.
- Kursive Schriftarten ahmen die menschliche Handschrift nach.
- Fantasieschriften sind dekorative/verspielte Schriften.
Alle verschiedenen Schriftnamen gehören zu einer der generischen Schriftfamilien.
Unterschied zwischen Serifen- und Sans-Serif-Schriftarten
Hinweis: Auf Computerbildschirmen gelten Sans-Serif-Schriftarten als leichter lesbar als Serifenschriften.
Einige Schriftbeispiele
| 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 font-familyEigenschaft, um die Schriftart eines Textes anzugeben.
Hinweis : Wenn der Name der Schriftart aus mehr als einem Wort besteht, muss er in Anführungszeichen gesetzt werden, z. B. „Times New Roman“.
Tipp: Die font-familyEigenschaft sollte mehrere Schriftnamen als "Fallback"-System enthalten, um eine maximale Kompatibilität zwischen Browsern/Betriebssystemen zu gewährleisten. Beginnen Sie mit der gewünschten Schriftart und enden Sie mit einer generischen Familie (damit der Browser eine ähnliche Schriftart in der generischen Familie auswählen kann, wenn keine anderen Schriftarten verfügbar sind). Die Schriftartnamen sollten mit Komma getrennt werden. Lesen Sie mehr über Fallback-Fonts im nächsten Kapitel .
Beispiel
Geben Sie einige unterschiedliche 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;
}