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 Feinkontrolle über die Merkmale von variablen Schriftarten, indem Sie die vier Buchstabenachsentags 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: Text wird mit den Standardeinstellungen aufgebaut.
<string> <number>: Beim Rendern von Text wird die Liste der variablen Schriftachsen-Tags an die Text-Layout-Engine übergeben, um Schriftmerkmale ein- oder auszuschalten. Jede Einstellung besteht immer aus einem oder mehreren Paaren, wobei jeweils eine <string> aus 4 ASCII-Zeichen gefolgt von einer <number> steht, die den zu setzenden Achsenwert angibt. Wenn die <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 festgelegten Wertebereich in Ihrer Schrift, Bruchteile oder negative Werte enthalten.

Beschreibung

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

Schriftmerkmale, die mit font-variation-settings gesetzt werden, überschreiben immer diejenigen, die mit den entsprechenden grundlegenden Schriftsätzen festgelegt sind, 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: registriert und benutzerdefiniert.

Registrierte Achsen sind die am häufigsten angetroffenen — sie sind so gebräuchlich, dass die Autoren der Spezifikation sie für standardisierungswürdig hielten. Beachten Sie, dass dies nicht bedeutet, dass der Autor alle diese in seine Schrift aufnehmen 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 + angle`
"ital"	`font-style`: `italic`
"opsz"	`font-optical-sizing`

Benutzerdefinierte Achsen können alles sein, was der Schriftgestalter in seiner Schrift variieren möchte, zum Beispiel Auf- oder Abwärtslängen, die Größe der Serifen oder alles andere, was ihnen einfällt. Jede Achse kann verwendet werden, solange sie ein eindeutiges 4-Zeichen-Achsentag hat. Einige werden schließlich häufiger verwendet und könnten sogar im Laufe der Zeit registriert werden.

Hinweis: Registrierte Achsentags werden mit Kleinbuchstaben identifiziert, während benutzerdefinierte Achsen mit Großbuchstaben versehen werden sollten. Beachten Sie, dass Schriftgestalter in keiner Weise gezwungen sind, diese Praxis zu befolgen, und einige tun es nicht. Wichtig ist hier, dass Achsentags zwischen Groß- und Kleinbuchstaben unterscheiden.

Um variable Schriftarten auf Ihrem Betriebssystem zu verwenden, sollten Sie sicherstellen, dass es auf dem neuesten Stand ist. Zum Beispiel benötigen Linux-Betriebssysteme die neueste Version von Linux FreeType, und macOS vor 10.13 unterstützt keine variablen Schriftarten. Wenn Ihr Betriebssystem nicht auf dem neuesten Stand ist, können Sie keine variablen Schriftarten auf Webseiten oder in den Firefox-Entwicklungstools 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 anderer Beispiele für variable Schriftarten in unserem Variable Fonts Leitfaden.

Kontrolle des variablen Schriftgewichts (wght)

Klicken Sie auf "Play" in den folgenden Codeblöcken, um das Beispiel im MDN Playground zu bearbeiten. Bearbeiten Sie das CSS, um mit verschiedenen Schriftgewichts-Werten zu spielen. 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 Schriftschräge (slnt)

Klicken Sie auf "Play" in den folgenden Codeblöcken, um das Beispiel im MDN Playground zu bearbeiten. Bearbeiten Sie das CSS, um mit verschiedenen Schräge-/Schrägwerten zu spielen.

<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 für variable Schriftarten
Überblick über OpenType-Schriftvariationen auf microsoft.com
OpenType Entwurfs-Variationsachsen Tag-Register auf microsoft.com
OpenType variable Schriftarten auf axis-praxis.org
Variable Fonts 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