Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

font-variation-settings CSS Attributbeschreibung

Eingeschränkt verfügbar

Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.

Die font-variation-settings CSS-Beschreibung ermöglicht es Autoren, niedrigstufige OpenType- oder TrueType-Schriftvariationen in der @font-face-Attributregel anzugeben. Die Werte für diese Beschreibung sind dieselben wie für die font-variation-settings-Eigenschaft, mit Ausnahme der globalen Schlüsselwortwerte.

Da diese Beschreibung Variationswerte am Schriftobjekt in der @font-face-Regel und nicht für ein gesamtes Element festlegt, können nur einige Glyphen in einem Element mit dieser Beschreibung 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>

Bei der Textdarstellung wird die Liste der OpenType-Achsennamen an die Textlayout-Engine übergeben, um Schriftzeicheneigenschaften ein- oder auszuschalten. Jede Einstellung ist immer ein <string> aus 4 ASCII-Zeichen, gefolgt von einer <number>-Angabe, die den Achsenwert angibt. Wenn das <string> mehr oder weniger Zeichen hat oder Zeichen außerhalb des Bereichs U+20 - U+7E enthält, ist die gesamte Eigenschaft ungültig. Der <number> kann gebrochen oder negativ sein.

Formale Definition

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

Formale Syntax

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

Beispiele

Einstellung 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

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

Browser-Kompatibilität

Siehe auch