CSS Fonts Shorthand

CSS Fonts Shorthand: In CSS ermöglicht die font-Shorthand-Eigenschaft, alle Font-Eigenschaften eines Elements kompakt in einer Zeile zu definieren. Die Shorthand umfasst Font-Stil, Gewicht, Größe, Zeilenhöhe und Familie und ist besonders hilfreich, um den CSS-Code übersichtlicher und kompakter zu gestalten.

Syntax der Shorthand-Eigenschaft

font: font-style font-variant font-weight font-size/line-height font-family;

Hinweis: Die Schriftgröße und Schriftfamilie sind Pflichtangaben in der Shorthand.

Einzelne Werte und ihre Bedeutung

• font-style: Bestimmt den Stil, z. B. italic, normal.
• font-variant: Setzt die Kleinbuchstabenoption, z. B. small-caps, normal.
• font-weight: Definiert das Gewicht, z. B. bold, normal, 100.
• font-size: Legt die Schriftgröße fest (Pflicht), z. B. 16px, 1em.
• line-height: Legt die Zeilenhöhe fest (optional), z. B. 1.5, 20px. Sie wird durch einen Schrägstrich (/) von der Schriftgröße getrennt.
• font-family: Die Schriftartfamilie (Pflicht), z. B. Arial, Georgia, 'Times New Roman'.

Beispielverwendung der Shorthand

p {
  font: italic small-caps bold 16px/1.5 Arial, sans-serif;
}

Aufgeschlüsselt:

• font-style: italic
• font-variant: small-caps
• font-weight: bold
• font-size: 16px
• line-height: 1.5
• font-family: Arial, sans-serif

Weitere Beispiele

Einfaches Shorthand-Beispiel

h1 {
  font: bold 24px Arial, sans-serif;
}

Hier wird nur das Gewicht (bold), die Größe (24px) und die Schriftart (Arial) festgelegt.

Shorthand mit Zeilenhöhe

p {
  font: normal 14px/1.6 'Times New Roman', serif;
}

In diesem Fall wird eine normale Schriftart mit einer Zeilenhöhe von 1.6 verwendet.

Häufig gestellte Fragen