`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.

Die font-variation-settings CSS-Eigenschaft bietet eine niedrigstufige Kontrolle über Variable Fonts, indem Sie die vier Buchstaben der Achsennamen der Merkmale, die Sie variieren möchten, zusammen mit ihren Werten angeben.

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: Text wird mit den Standardeinstellungen formatiert.
<string> <number>: Beim Rendern von Text wird die Liste der Variablenbasisschriftachsen an die Textlayout-Engine übergeben, um Schriftmerkmale zu aktivieren oder zu deaktivieren. Jede Einstellung besteht immer aus einem oder mehreren Paaren aus einem <string> von 4 ASCII-Zeichen, gefolgt von einer <number>, die den zu setzenden Achsenwert angibt. Hat das <string> mehr oder weniger Zeichen oder enthält Zeichen außerhalb des U+20 - U+7E Codepoint-Bereichs, ist die gesamte Eigenschaft ungültig. Der <number> kann je nach verfügbarem Wertebereich in Ihrer Schriftart, wie vom Schriftartendesigner definiert, gebrochen oder negativ sein.

Beschreibung

Diese Eigenschaft ist ein niedrigstufiger Mechanismus, der entwickelt wurde, um Variablenbasisschriftmerkmale einzustellen, wenn keine andere Möglichkeit zur Verfügung steht, um diese Merkmale zu aktivieren oder darauf zuzugreifen. Sie sollten sie nur verwenden, wenn keine grundlegenden Eigenschaften existieren, um diese Merkmale festzulegen (z. B. font-weight, font-style).

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

Registrierte und benutzerdefinierte Achsen

Variable Schriftachsen gibt es in zwei Arten: registriert und benutzerdefiniert.

Registrierte Achsen sind die am häufigsten angetroffenen - so häufig, dass die Autoren der Spezifikation entschieden haben, sie zu standardisieren. Beachten Sie, dass dies nicht bedeutet, dass der Autor alle diese in ihrer Schriftart enthalten muss.

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

Achsentag	CSS-Eigenschaft
"wght"	`font-weight`
"wdth"	`font-stretch`
"slnt" (Schräge)	`font-style`: `oblique + Winkel`
"ital"	`font-style`: `italic`
"opsz"	`font-optical-sizing`

Benutzerdefinierte Achsen können alles sein, was der Schriftartendesigner in ihrer Schriftart variieren möchte, beispielsweise Auf- oder Abstiegshöhen, die Größe der Serifen oder alles, was sie sich vorstellen können. Jede Achse kann verwendet werden, solange sie eine einzigartige vierstellige Achse zugewiesen bekommt. Einige werden schließlich häufiger werden und können sogar im Laufe der Zeit registriert werden.

Hinweis: Registrierte Achsentags werden mit Kleinbuchstaben identifiziert, während benutzerdefinierte Achsen Großbuchstabentags zugewiesen bekommen sollten. Beachten Sie, dass Schriftartendesigner nicht gezwungen sind, diese Praxis einzuhalten, und einige werden es nicht tun. Das Wichtigste hier ist, dass Achsentags zwischen Groß- und Kleinschreibung unterscheiden.

Um Variable Fonts unter 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 Version 10.13 unterstützt keine Variblenbasisschriftsätze. Wenn Ihr Betriebssystem nicht auf dem neuesten Stand ist, können Sie keine Variable Fonts auf Webseiten oder in den Firefox Developer Tools verwenden.

Formal 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

Sie finden eine Reihe weiterer Beispiele für Variable Fonts in unserem Leitfaden zu variablen Schriftarten.

Kontrolle über das Gewicht variabler Schriftarten (wght)

Klicken Sie auf "Play" in den untenstehenden Codeblöcken, um das Beispiel im MDN Playground zu bearbeiten. Bearbeiten Sie das CSS, um mit verschiedenen Schriftgewichtswerten zu experimentieren. Beobachten 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);
});

Kontrolle über die Schräge variabler Schriftarten (slnt)

Klicken Sie auf "Play" in den untenstehenden Codeblöcken, um das Beispiel im MDN Playground zu bearbeiten. Bearbeiten Sie das CSS, um mit verschiedenen Schrägwerten der Schriftsätze 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 Design-Variations-Achsentag-Register auf microsoft.com
OpenType Variable Fonts auf axis-praxis.org
Variable Fonts 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