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

Mehr erfahren
Vollständige Kompatibilität anzeigen

Die font-variation-settings CSS-Eigenschaft bietet eine niedrigstufige Kontrolle über die Merkmale von variablen Schriften, indem Sie die vier Buchstaben 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

Diese Eigenschaft wird als normal oder eine durch Kommas getrennte Liste von Zeichenfolgen-Zahlen-Paaren angegeben:

normal: Text wird mit den Standardeinstellungen dargestellt.
<string> <number>: Beim Rendern von Text wird die Liste der Variablen Schriftachsen-Namen an die Textlayout-Engine übergeben, um Schriftmerkmale zu aktivieren oder zu deaktivieren. Jede Einstellung besteht immer aus einem oder mehreren Paaren, bestehend aus einem <string> mit 4 ASCII-Zeichen, gefolgt von einer <number>, die den zu setzenden Achsenwert angibt. Wenn das <string> mehr oder weniger Zeichen hat oder Zeichen außerhalb des Codepunktbereichs U+20 - U+7E enthält, ist die gesamte Eigenschaft ungültig. Die <number> kann je nach dem vom Schriftgestalter definierten Wertebereich Ihrer Schriftart gebrochen oder negativ sein.

Beschreibung

Diese Eigenschaft ist ein niedrigstufiger Mechanismus, um variable Schriftmerkmale zu setzen, wenn es keine andere Möglichkeit gibt, diese Merkmale zu aktivieren oder darauf zuzugreifen. Sie sollten sie nur verwenden, wenn keine grundlegenden Eigenschaften existieren, um diese Merkmale zu setzen (z.B. font-weight, font-style).

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

Registrierte und benutzerdefinierte Achsen

Variable Schriftachsen gibt es in zwei Arten: registrierte und benutzerdefinierte.

Registrierte Achsen sind die am häufigsten vorkommenden — sie sind so häufig, dass die Autoren der Spezifikation meinten, sie seien es wert, standardisiert zu werden. Beachten Sie, dass dies nicht bedeutet, dass der Autor alle von ihnen in seiner Schriftart aufnehmen muss.

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

Achsen-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 Schriftgestalter in seiner Schrift variieren möchte, z.B. die Höhe von Auf- oder Abstrichen, die Größe von Serifen oder alles andere, was ihm einfällt. Jede Achse kann verwendet werden, solange sie eine einzigartige 4-Zeichen-Achse hat. Einige werden häufiger werden und könnten über die Zeit sogar registriert werden.

Hinweis: Registrierte Achsen-Tags werden mit kleinen Buchstaben identifiziert, wohingegen benutzerdefinierte Achsen große Buchstaben erhalten sollten. Beachten Sie, dass Schriftgestalter nicht gezwungen sind, diese Praxis in irgendeiner Weise zu befolgen, und einige werden es nicht tun. Wichtig ist, dass Achsen-Tags case-sensitive sind.

Um variable Schriften auf Ihrem Betriebssystem zu verwenden, müssen Sie sicherstellen, dass es auf dem neuesten Stand ist. Zum Beispiel benötigen Linux-Betriebssysteme die neueste Linux FreeType-Version, und macOS vor 10.13 unterstützt variable Schriften nicht. Wenn Ihr Betriebssystem nicht auf dem neuesten Stand ist, können Sie variable Schriften auf Webseiten oder in den Firefox Developer Tools nicht 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

Sie finden eine Reihe weiterer Beispiele für variable Schriften in unserem Leitfaden zu variablen Schriften.

Kontrolle des variablen Schriftgewichts (wght)

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

Kontrolle der variablen Schräglage (slnt)

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

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

Browser-Kompatibilität

Siehe auch

Leitfaden zu variablen Schriften
OpenType-Schriftvariationen-Übersicht auf microsoft.com
OpenType-Design-Variation Achsen-Tag-Registrierung auf microsoft.com
OpenType-Variable Schriftarten auf axis-praxis.org
Variable Schriften 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