`font-variation-settings` CSS property

Baseline

Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit September 2018 browserübergreifend verfügbar.

Vollständige Kompatibilität anzeigen
Mehr erfahren

Die CSS-Eigenschaft font-variation-settings ermöglicht eine präzise Steuerung von variablen Schriftarten, indem Sie die vierbuchstabigen Achsennamen der zu variierenden Eigenschaften zusammen mit ihren Werten angeben können.

Probieren Sie es aus

font-variation-settings: "wght" 50;

font-variation-settings: "wght" 850;

font-variation-settings: "wdth" 25;

font-variation-settings: "wdth" 75;

<section id="default-example">
  <p id="example-element">
    ...it would not be wonderful to meet a Megalosaurus, forty feet long or so,
    waddling like an elephantine lizard up Holborn Hill.
  </p>
</section>

@font-face {
  src: url("/shared-assets/fonts/variable-fonts/AmstelvarAlpha-VF.woff2");
  font-family: "Amstelvar";
  font-style: normal;
}

p {
  font-size: 1.5rem;
  font-family: "Amstelvar", serif;
}

Syntax

css

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

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

/* Global values */
font-variation-settings: inherit;
font-variation-settings: initial;
font-variation-settings: revert;
font-variation-settings: revert-layer;
font-variation-settings: unset;

Werte

Diese Eigenschaft wird als normal oder als durch Kommata getrennte Liste von String-Zahlen-Wertepaaren angegeben:

normal: Text wird mit den Standardeinstellungen gesetzt.
<string> <number>: Beim Rendern von Text wird die Liste der Achsennamen variabler Schriftarten an die Text-Layout-Engine übergeben, um Schriftfunktionen zu aktivieren oder zu deaktivieren. Jede Einstellung besteht immer aus einem oder mehreren Paaren aus einem <string> mit 4 ASCII-Zeichen, gefolgt von einer <number>, die den festzulegenden Achsenwert angibt. Wenn der <string> mehr oder weniger Zeichen enthält oder Zeichen außerhalb des Codepoint-Bereichs U+20 - U+7E enthält, ist die gesamte Eigenschaft ungültig. Die <number> kann gebrochen oder negativ sein, abhängig vom in Ihrer Schriftart verfügbaren Wertebereich, wie er vom Schriftgestalter definiert wurde.

Beschreibung

Diese Eigenschaft ist ein Low-Level-Mechanismus, der zum Festlegen von Funktionen variabler Schriftarten vorgesehen ist, wenn keine andere Möglichkeit zum Aktivieren oder Zugreifen auf diese Funktionen besteht. Sie sollten sie nur verwenden, wenn keine grundlegenden Eigenschaften zum Festlegen dieser Funktionen vorhanden sind (z. B. font-weight, font-style).

Mit font-variation-settings festgelegte Schriftmerkmale überschreiben immer diejenigen, die mit den entsprechenden grundlegenden Schrifteigenschaften wie font-weight festgelegt wurden, unabhängig davon, wo sie in der Kaskade erscheinen. In einigen Browsern gilt dies derzeit nur, wenn die @font-face-Deklaration einen font-weight-Bereich enthält.

Registrierte und benutzerdefinierte Achsen

Achsen variabler Schriftarten gibt es in zwei Arten: registrierte und benutzerdefinierte.

Registrierte Achsen kommen am häufigsten vor — so häufig, dass die Autoren der Spezifikation es für sinnvoll hielten, sie zu standardisieren. Beachten Sie, dass dies nicht bedeutet, dass der Autor alle diese Achsen in seine Schriftart aufnehmen muss.

Hier sind die registrierten Achsen zusammen mit ihren entsprechenden CSS-Eigenschaften:

Achsen-Tag	CSS-Eigenschaft
"wght"	`font-weight`
"wdth"	`font-stretch`
"slnt" (Neigung)	`font-style`: `oblique + angle`
"ital"	`font-style`: `italic`
"opsz"	`font-optical-sizing`

Benutzerdefinierte Achsen können alles sein, was der Schriftgestalter in seiner Schriftart variieren möchte, beispielsweise Ober- oder Unterlängen, die Größe von Serifen oder alles andere, was er sich vorstellen kann. Jede Achse kann verwendet werden, solange ihr ein eindeutiger vierzeichenlanger Achsen-Tag zugewiesen wird. Einige werden mit der Zeit häufiger verwendet und können sogar registriert werden.

Hinweis: Registrierte Achsen-Tags werden mit Tags in Kleinbuchstaben gekennzeichnet, während benutzerdefinierte Achsen Tags in Großbuchstaben erhalten sollten. Beachten Sie, dass Schriftgestalter in keiner Weise dazu verpflichtet sind, dieser Praxis zu folgen, und einige dies nicht tun werden. Wichtig ist hierbei, dass bei Achsen-Tags die Groß- und Kleinschreibung beachtet wird.

Um variable Schriftarten auf Ihrem Betriebssystem verwenden zu können, müssen Sie sicherstellen, dass es auf dem neuesten Stand ist. Linux-Betriebssysteme benötigen beispielsweise die neueste Linux-FreeType-Version, und macOS vor 10.13 unterstützt keine variablen Schriftarten. Wenn Ihr Betriebssystem nicht auf dem neuesten Stand ist, können Sie variable Schriftarten weder auf Webseiten noch in den Firefox-Entwicklerwerkzeugen verwenden.

Formale Definition

Anfangswert	`normal`
Anwendbar auf	alle Elemente. Auch anwendbar auf `::first-letter` und `::first-line`.
Vererbt	Ja
Berechneter Wert	wie angegeben
Animationstyp	Transformation

Formale Syntax

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

<opentype-tag> = 
  <string>

Beispiele

Weitere Beispiele für variable Schriftarten finden Sie in unserem Leitfaden zu variablen Schriftarten.

Steuerung der Stärke variabler Schriftarten (wght)

Klicken Sie in den folgenden Codeblöcken auf „Play“, um das Beispiel im MDN Playground zu bearbeiten. Bearbeiten Sie das CSS, um mit verschiedenen Werten für die Schriftstärke zu experimentieren. Sehen Sie, was passiert, wenn Sie einen Wert außerhalb des Stärkebereichs angeben.

<div>
  <p class="p1">Weight</p>
  <span>(font-weight: 625)</span>
</div>
<div>
  <p class="p2">Weight</p>
  <span>(font-variation-settings: "wght" 625)</span>
</div>
<div class="adjustable">
  <p class="p3">Weight</p>
  (font-variation-settings: "wght" <span id="angle-text">625</span>)<br />
  <label for="text-axis">Adjust Weight: </label>
  <input
    type="range"
    id="text-axis"
    name="text-axis"
    min="300"
    max="900"
    value="625" />
</div>

@font-face {
  font-family: "Amstelvar VF";
  src: url("https://mdn.github.io/shared-assets/fonts/variable-fonts/AmstelvarAlpha-VF.woff2")
    format("woff2-variations");
  font-weight: 300 900;
  font-stretch: 35% 100%;
  font-style: normal;
  font-display: swap;
}

p {
  font:
    1.2em "Amstelvar VF",
    "Georgia",
    serif;
  font-size: 4rem;
  margin: 1rem;
  display: inline-block;
}

.adjustable {
  border: 1px dashed;
  --text-axis: 625;
}

css

/* weight range is 300 to 900 */
.p1 {
  font-weight: 625;
}

/* weight range is 300 to 900 */
.p2 {
  font-variation-settings: "wght" 625;
}

/* Adjust with slider & custom property */
.p3 {
  font-variation-settings: "wght" var(--text-axis);
}

const angle = document.querySelector("#text-axis");
const text = document.querySelector("#angle-text");
const adjustable = document.querySelector(".adjustable");

angle.addEventListener("input", (e) => {
  const angle = e.target.value;
  text.innerText = angle;
  adjustable.style.setProperty("--text-axis", angle);
});

Steuerung der Neigung variabler Schriftarten (slnt)

Klicken Sie in den folgenden Codeblöcken auf „Play“, um das Beispiel im MDN Playground zu bearbeiten. Bearbeiten Sie das CSS, um mit verschiedenen Werten für die Neigung/Kursivstellung der Schriftart zu experimentieren.

<div>
  <p class="p1">Slant</p>
  <span>(font-style: oblique 14deg)</span>
</div>
<div>
  <p class="p2">Slant</p>
  <span>(font-variation-settings: 'slnt' 12)</span>
</div>
<div class="adjustable">
  <p class="p3">Slant</p>
  (font-variation-settings: 'slnt' <span id="angle-text">5</span>)<br />
  <label for="text-axis">Adjust Weight: </label>
  <input
    type="range"
    id="text-axis"
    name="text-axis"
    min="0"
    max="12"
    value="5" />
</div>

@font-face {
  font-family: "Roboto VF";
  src: url("https://mdn.github.io/shared-assets/fonts/variable-fonts/Roboto-VF.woff2")
    format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 75% 100%;
  font-style: oblique 0deg 12deg;
  font-display: swap;
}

p {
  font:
    1.2em "Roboto VF",
    "Helvetica",
    sans-serif;
  font-size: 4rem;
  margin: 1rem;
  display: inline-block;
}

.adjustable {
  border: 1px dashed;
  --text-axis: 5;
}

css

/* slant range is from 0deg to 12deg */
.p1 {
  font-style: oblique 14deg;
}

/* slant range is from 0 to 12 */
.p2 {
  font-variation-settings: "slnt" 12;
}

/* Adjust with slider & custom property */
.p3 {
  font-variation-settings: "slnt" var(--text-axis);
}

const angle = document.querySelector("#text-axis");
const text = document.querySelector("#angle-text");
const adjustable = document.querySelector(".adjustable");

angle.addEventListener("input", (e) => {
  const angle = e.target.value;
  text.innerText = angle;
  adjustable.style.setProperty("--text-axis", angle);
});

Spezifikationen

Spezifikation
CSS Fonts Module Level 4 # font-variation-settings-def

Browser-Kompatibilität

Siehe auch

Leitfaden zu variablen Schriftarten
Übersicht zu OpenType-Schriftvariationen auf microsoft.com
OpenType-Registrierung für Design-Variationsachsen-Tags auf microsoft.com
Variable OpenType-Schriftarten auf axis-praxis.org
Variable Schriftarten auf v-fonts.com

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

font-variation-settings CSS property

Help improve MDN

`font-variation-settings` CSS property