font-variation-settings

Der CSS-Deskriptor font-variation-settings ermöglicht es Autoren, Low-Level-OpenType- oder TrueType-Schriftvariationen in der @font-face-At-Regel zu spezifizieren. Die Werte für diesen Deskriptor sind die gleichen wie für die Eigenschaft font-variation-settings, mit Ausnahme der globalen Schlüsselwortwerte.

Da dieser Deskriptor Variationswerte auf dem Schriftobjekt in der @font-face-At-Regel und nicht auf einem ganzen Element festlegt, können nur einige Glyphen in einem Element mit diesem Deskriptor gerendert werden.

Syntax

css
/* Use the default settings */
font-variation-settings: normal;

/* Set values for OpenType axis names */
font-variation-settings: "xhgt" 0.7;

Werte

normal

Text wird mit den Standardeinstellungen layoutet.

<string> <number>

Beim Rendern von Text wird die Liste der OpenType-Achsennamen an die Textlayout-Engine übergeben, um Schriftmerkmale zu aktivieren oder zu deaktivieren. Jede Einstellung ist immer ein <string> aus 4 ASCII-Zeichen, gefolgt von einer <number>, die den Achsenwert angibt. Hat der <string> mehr oder weniger Zeichen oder enthält Zeichen außerhalb des Codepunktbereichs U+20 - U+7E, ist die gesamte Eigenschaft ungültig. Die <number> kann fraktional oder negativ sein.

Formale Definition

Zugehörige @-Regel@font-face
Anfangswertnormal
Berechneter Wertwie angegeben

Formale Syntax

font-variation-settings = 
normal |
[ <string> <number> ]#

Beispiele

Festlegen von Schriftgewicht und -dehnung in einer @font-face-Regel

css
@font-face {
  font-family: "OpenTypeFont";
  src: url("open_type_font.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-variation-settings:
    "wght" 400,
    "wdth" 300;
}

Spezifikationen

Specification
CSS Fonts Module Level 4
# font-rend-desc

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
font-variation-settings

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.

Siehe auch