CSS/Eigenschaften/font-variation-settings

Die Eigenschaft font-variation-settings ermöglicht die genaue Steuerung variabler Schriftmerkmale, indem du die aus vier Buchstaben bestehenden Achsennamen der Merkmale, die du variieren möchtest, zusammen mit deren Werten angeben kannst.

Erlaubte Werte

• normal:Standardeinstellungen werden verwendet
• Achsenname + Wert
  • "wght" font-weight
  • "wdth" font-stretch
  • "slnt" (slant) font-style: oblique + angle
  • "ital" font-style: italic
  • "opsz"

Vererbung steuernde Werte inherit, initial, unset und revert

Standardwert

normal

anwendbar auf

alle Elemente

Vererbung

ja

animierbar

transform

Beispiel

html{
  font-family: 'Amstelvar';
  font-variation-settings: "wght" 700, "GRAD" 60;
}

Die Schrift Amstelvar soll mit einer Schriftstärke von 700 fett dargestellt werden. Neben den Standard-Achsen enthält sie noch eine weitere, individuelle Achse, die in Großbuchstaben notiert ist.

Beachte: Langfristig sollen Variable Fonts auch mit den „normalen“ Eigenschaften wie font-weight, font-stretch, etc gestylt werden können.

Siehe auch

• Typografie/Variable Fonts
  • font-variation-settings

Weblinks

• Spezifikation (W3C): font-variation-settings (CSS Fonts Module Level 4)
• MDN: font-variation-settings