font-variation-settings

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨September 2018⁩.

Die font-variation-settings CSS-Eigenschaft bietet eine niedrigstufige Kontrolle über die Merkmale von variablen Schriftarten, indem Sie die vier Buchstaben-Achsen-Namen der Merkmale, die Sie variieren möchten, 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.ttf");
  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

Der Wert dieser Eigenschaft kann eine von zwei Formen annehmen:

normal: Der Text wird mit Standardeinstellungen gestaltet.
<string> <number>: Beim Rendern des Textes wird die Liste der Achsennamen der variablen Schriftarten an die Textlayout-Engine übergeben, um Schrifteigenschaften zu aktivieren oder zu deaktivieren. Jede Einstellung ist immer eines oder mehrere Paare, bestehend aus einem <string> aus 4 ASCII-Zeichen, gefolgt von einer <number>, die den Achsenwert angibt, der festgelegt werden soll. Wenn das <string> mehr oder weniger Zeichen hat oder Zeichen außerhalb des Bereichs der Code-Punkte U+20 - U+7E enthält, ist die gesamte Eigenschaft ungültig. Das <number> kann je nach dem im Schriftartdesigner festgelegten Bereich fraktional oder negativ sein.

Beschreibung

Diese Eigenschaft ist ein niedrigstufiger Mechanismus, um die Funktionen variabler Schriftarten festzulegen, wenn keine andere Möglichkeit besteht, diese Funktionen zu aktivieren oder darauf zuzugreifen. Sie sollten sie nur verwenden, wenn keine grundlegenden Eigenschaften existieren, um diese Funktionen festzulegen (z. B. font-weight, font-style).

Mit font-variation-settings eingestellte Schrifteigenschaften überschreiben immer die mit den entsprechenden grundlegenden Schriftart-Eigenschaften eingestellten Werte, z. B. font-weight, egal wo sie in der Kaskade erscheinen. In einigen Browsern trifft dies derzeit nur zu, wenn die @font-face-Deklaration einen font-weight-Bereich enthält.

Registrierte und benutzerdefinierte Achsen

Variable Schriftartenachsen gibt es in zwei Typen: registrierte und benutzerdefinierte.

Registrierte Achsen sind die am häufigsten anzutreffenden — so häufig, dass die Autoren der Spezifikation sie für standardisierungswürdig hielten. Dies bedeutet nicht, dass der Autor all diese Achsen in seiner Schriftart enthalten muss.

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

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

Benutzerdefinierte Achsen können alles sein, was der Schriftartdesigner in seiner Schriftart variieren möchte, z. B. Ascender- oder Descender-Höhen, die Größe von Serifen oder alles andere, was sie sich vorstellen können. Jede Achse kann verwendet werden, solange sie eine eindeutige 4-Zeichen-Achse erhält. Einige werden mit der Zeit häufiger werden und möglicherweise sogar registriert.

Hinweis: Registrierte Achstags werden unter Verwendung von Kleinbuchstaben-Tags identifiziert, während benutzerdefinierte Achsen Großbuchstaben-Tags erhalten sollten. Beachten Sie, dass Schriftartdesigner nicht gezwungen sind, diese Praxis zu befolgen, und einige werden dies nicht tun. Wichtig ist hier, dass Achstags zwischen Groß- und Kleinschreibung unterscheiden.

Um variable Schriftarten auf Ihrem Betriebssystem zu verwenden, müssen Sie sicherstellen, dass es auf dem neuesten Stand ist. Beispielsweise benötigen Linux-Betriebssysteme 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 Developer Tools 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 zu variablen Schriftarten finden Sie in unserem Leitfaden zu variablen Schriftarten.

Steuerung des variablen Schriftgewichts (wght)

Klicken Sie auf "Play" in den Codeblöcken unten, um das Beispiel im MDN Playground zu bearbeiten. Bearbeiten Sie das CSS, um mit verschiedenen Schriftgewichten zu experimentieren. Sehen Sie, was passiert, wenn Sie einen Wert außerhalb des Gewichtsbereichs 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 variablen Schriftneigung (slnt)

Klicken Sie auf "Play" in den Codeblöcken unten, um das Beispiel im MDN Playground zu bearbeiten. Bearbeiten Sie das CSS, um mit verschiedenen Schriftneigungen/Schräglagen-Werten 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

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

Browser-Kompatibilität

Siehe auch

Leitfaden zu variablen Schriftarten
OpenType Schriftvarianten-Übersicht auf microsoft.com
OpenType Design-Variations-Achsen-Tag-Register auf microsoft.com
OpenType variable Schriftarten auf axis-praxis.org
Variable Schriftarten auf v-fonts.com

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

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