Betrachten wir die gebräuchlichsten schriftbezogenen Eigenschaften.

selector {
  font-family: 'Montserrat' | 'Oswald' | 'Lato' |...; /* any font family */
  font-size: 12px | 0.5em | 0.8rem |...; /* it can be any value in px/em/rem units */
  font-weight: 400 | 500 | 700 | 900 |...; /* value 100 - 900 */
  font-style: normal | italic | oblique; /* only these values available */
}

Hinweis

Alle Beispiele werden mit demselben Textinhalt demonstriert, um die Möglichkeit zu bieten, zu beobachten, wie derselbe Text unterschiedlich dargestellt werden kann.

font-family

Die Eigenschaft font-family definiert die Schriftfamilie oder mehrere Schriftfamilien, die zur Anzeige des Textinhalts verwendet werden. Es ist möglich, einen einzelnen Schriftfamiliennamen oder eine Liste mehrerer durch Kommas getrennter Schriftfamiliennamen anzugeben.

font-size

Die Eigenschaft font-size legt die Schriftgröße für die Anzeige von Textinhalten fest. Sie kann als feste Größe in px oder als relative Größe in den Einheiten em oder rem angegeben werden.

font-weight

Die Eigenschaft font-weight bestimmt die Stärke oder Dicke der Schrift, die zur Anzeige von Textinhalten verwendet wird. Sie kann als numerischer Wert (z. B. 300, 500, 700, ...) oder als Schlüsselwort (z. B. lighter, normal oder bold) angegeben werden.

font-style

Die Eigenschaft font-style legt den Stil der Schrift fest, die für Textinhalte verwendet wird. Mögliche Werte sind normal (Standardwert), italic oder oblique.

Pseudoklasse ::first-letter

Die Pseudoklasse first-letter wählt den ersten Buchstaben eines Absatzes oder einer Überschrift aus und gestaltet ihn. Um diese Pseudoklasse zu verwenden, setzt man nach einem Selektor doppelte Doppelpunkte :: und fügt das Schlüsselwort first-letter hinzu.

selector::first-letter {
 /* some styles */
}

Im folgenden Beispiel wird gezeigt, wie dies funktioniert.

Zusammenfassung

• font-family legt die Schriftart oder Ersatzschriftarten für Text fest. Es können mehrere Schriftarten angegeben werden, um eine korrekte Darstellung zu gewährleisten;
• font-size definiert die Textgröße mit absoluten Einheiten (px) oder relativen Einheiten (em, rem);
• font-weight steuert die Schriftstärke, entweder numerisch (100–900) oder mit Schlüsselwörtern wie normal oder bold;
• font-style bestimmt den Schriftstil, zum Beispiel normal, italic oder oblique;
• Die Pseudoklasse ::first-letter adressiert und gestaltet den ersten Buchstaben eines Textblocks und ermöglicht kreative typografische Effekte.