Die generischen Schriftfamilien in CSS

click fraud protection

Typografisches Design spielt eine wichtige Rolle im Website-Design. Gut angelegte und formatierte Textinhalte helfen einer Website, erfolgreicher zu sein, indem sie ein Leseerlebnis schaffen, das sowohl angenehm als auch einfach zu konsumieren ist. Ein Teil Ihrer Bemühungen bei der Arbeit mit Schrift besteht darin, die richtigen Schriftarten für Ihr Design auszuwählen und dann CSS zu verwenden, um diese Schriftarten und Schriftstile zur Anzeige der Seite hinzuzufügen. Dies geschieht mit dem sogenannten a Schriftartenstapel.

Schriftstapel

Wenn du eine Schriftart angeben Für die Verwendung auf einer Webseite empfiehlt es sich, auch Fallback-Optionen einzubeziehen, falls Ihre Schriftartenauswahl nicht gefunden werden kann. Diese Fallback-Optionen werden in der Schriftartenstapel. Wenn der Browser die erste im Stapel aufgeführte Schriftart nicht finden kann, wechselt er zur nächsten. Es setzt diesen Vorgang fort, bis es eine Schriftart findet, die es verwenden kann, oder es keine Auswahl mehr hat (in diesem Fall wählt es einfach eine beliebige Systemschriftart aus). Hier ist ein Beispiel dafür, wie ein Font-Stack in CSS aussehen würde, wenn er auf das "body"-Element angewendet wird:

instagram viewer

Körper {
Schriftfamilie: Georgia, "Times New Roman", Serifen;
}

Die Schriftart Georgia wird zuerst angezeigt, daher wird diese standardmäßig von der Seite verwendet, aber wenn diese Schriftart aus irgendeinem Grund nicht verfügbar ist, greift die Seite auf Times New Roman zurück.

Umschließen Times New Roman in doppelten Anführungszeichen, da es sich um einen aus mehreren Wörtern bestehenden Namen handelt. Schriftartnamen mit nur einem Wort, wie Georgia oder Arial, benötigen keine Anführungszeichen, aber Schriftartnamen mit mehreren Wörtern mit eingebetteten Leerzeichen benötigen sie, damit der Browser weiß, dass alle diese Wörter den Schriftartnamen enthalten.

Der Schriftstapel endet mit dem Wort Serife. Das ist ein generischer Schriftfamilienname. Für den unwahrscheinlichen Fall, dass eine Person kein Georgia hat oder Times New Roman Auf ihrem Computer würde die Site jede Serifenschrift verwenden, die sie finden konnte. Der Browser wählt eine Schriftart für Sie aus, aber Sie bieten zumindest eine Anleitung, damit er weiß, welche Schriftart im Design am besten funktioniert.

Generische Schriftfamilien

Die in CSS verfügbaren generischen Schriftartnamen sind:

  • kursiv
  • Fantasie
  • Monoraum
  • Serife
  • serifenlos

Während im Webdesign und in der Typografie noch viele andere Schriftklassifikationen verfügbar sind, darunter Slab-Serif, Blackletter, Display, Grunge und mehr, diese fünf generischen Schriftartnamen sind die, die Sie in einem Schriftartenstapel verwenden würden im CSS-Format.

  • Kursive Schriftarten — weisen oft dünne, kunstvolle Buchstabenformen auf, die ausgefallenen handgeschriebenen Text replizieren sollen. Diese Schriftarten sind wegen ihrer dünnen, blumigen Buchstaben nicht für einen großen Inhaltsblock wie Fließtext geeignet. Kursive Schriftarten werden im Allgemeinen für Überschriften und kürzere Textanforderungen verwendet, die in größeren Schriftgrößen angezeigt werden können.
  • Fantasy-Schriften — sind die etwas verrückten Schriftarten, die in keine andere Kategorie fallen. Schriftarten, die bekannte Logos nachbilden, wie die Buchstabenformen der Harry Potter oder Zurück in die Zukunft Filme, fallen in diese Kategorie. Diese Schriftarten sind nicht für Textkörper geeignet, da sie oft so stilisiert sind, dass das Lesen längerer Textpassagen in diesen Schriftarten viel zu schwierig ist.
  • Monospace-Schriften — verfügen über gleich große und beabstandete Buchstabenformen, wie Sie sie auf einer alten Schreibmaschine finden würden. Im Gegensatz zu anderen Schriftarten, die je nach Größe variable Breiten für Buchstaben haben (z W nimmt viel mehr Platz ein als ein Kleinbuchstabe ich) verwenden Monospace-Schriften eine feste Breite für alle Zeichen. Diese Schriftarten werden häufig zum Auslesen von Code verwendet, da sie sich deutlich von anderem Text auf dieser Seite unterscheiden.
  • Serifenschriften — Verwenden Sie kleine zusätzliche Ligaturen auf den Buchstabenformen. Diese zusätzlichen Stücke heißen Serifen. Gängige Serifenschriften sind Georgia und Times New Roman. Serifenschriften eignen sich hervorragend für großen Text wie Überschriften sowie lange Textpassagen und Fließtext.
  • SerifenlosSchriftarten - keine Ligaturen haben. Der Name bedeutet ohne Serifen. Beliebte Schriftarten in dieser Kategorie sind Arial oder Helvetica. Ähnlich wie Serifen schneiden serifenlose Schriftarten sowohl in Überschriften als auch in Textkörpern gleichermaßen gut ab, obwohl einige Experten bevorzugen, dass große Textblöcke serifenlose Schriftarten vermeiden, da sie an kleinen Stellen schwerer zu lesen sind Größen.
instagram story viewer