font-feature-settings

Baseline 2025

Newly available

Since ⁨September 2025⁩, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Der font-feature-settings CSS Deskriptor ermöglicht Ihnen, die anfänglichen Einstellungen für die durch die @font-face At-Regel definierte Schriftart festzulegen. Sie können diesen Deskriptor weiter verwenden, um typografische Schriftfunktionen wie Ligaturen, Kapitälchen und Schwünge für die durch @font-face definierte Schriftart zu steuern. Die Werte für diesen Deskriptor sind dieselben wie für die font-feature-settings Eigenschaft, mit Ausnahme der globalen Schlüsselwortwerte.

Da dieser Deskriptor die Funktionswerte für das Schriftobjekt in der @font-face At-Regel und nicht auf einem gesamten Element festlegt, können nur einige Glyphen in einem Element mit diesem Deskriptor gerendert werden.

Syntax

css

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

/* Set values for OpenType feature tags */
font-feature-settings: "smcp";
font-feature-settings: "smcp" on;
font-feature-settings: "swsh" 2;

Werte

Dieser Deskriptor wird entweder als das Schlüsselwort normal oder als kommagetrennte Liste von <feature-tag-value> Werten angegeben. Beim Rendern von Text werden die Liste von OpenType <feature-tag-value> Werten an die Textlayout-Engine übergeben, um Schriftartenfunktionen zu aktivieren oder zu deaktivieren.

normal

Gibt an, dass der Text mit den Standard-Schrifteinstellungen layoutet wird. Dies ist der Standardwert.

<feature-tag-value>

Stellt ein durch Leerzeichen getrenntes Tupel dar, bestehend aus einem Tag-Namen und einem optionalen Wert.

Der Tag-Name ist immer ein <string> aus vier ASCII Zeichen. Wenn der Tag-Name mehr oder weniger Zeichen hat oder Zeichen außerhalb des U+20 – U+7E Codepunktspektrums enthält, ist der Deskriptor ungültig.

Der optionale Wert kann eine positive Ganzzahl oder das Schlüsselwort on oder off sein. Die Schlüsselwörter on und off sind Synonyme für die Werte 1 und 0. Wenn kein Wert festgelegt ist, ist der Standard 1. Bei nicht-boolean OpenType-Funktionen (z. B. stilistische Alternativen) impliziert der Wert die Auswahl eines bestimmten Glyphs; bei boolean Funktionen schaltet der Wert die Funktion ein oder aus.

Formale Definition

Zugehörige @-Regel	`@font-face`
Anfangswert	`normal`
Berechneter Wert	wie angegeben

Formale Syntax

font-feature-settings = 
  normal                |
  <feature-tag-value>#

Beispiele

Aktivieren von Schwungglyphen mit der @font-face Regel

In diesem Beispiel wird der Tag-Name swsh und ein boolescher Wert 1 als Wert für den font-feature-settings Deskriptor in der @font-face At-Regel verwendet.

HTML

html

<p class="swash-off">Swash is off here</p>
<p class="swash-on">Swash is on here</p>

CSS

css

@font-face {
  font-family: "MonteCarlo";
  src: url("/shared-assets/fonts/monte-carlo/monte-carlo-regular.woff2");
}
@font-face {
  font-family: "MonteCarlo2";
  src: url("/shared-assets/fonts/monte-carlo/monte-carlo-regular.woff2");
  font-feature-settings: "swsh" 1;
}
p {
  font-size: 3rem;
  margin: 0.7rem 3rem;
}
.swash-off {
  font-family: "MonteCarlo", cursive;
}
.swash-on {
  font-family: "MonteCarlo2", cursive;
}

Ergebnis

Zeile 1 zeigt das standardmäßige verzierte Design der MonteCarlo Schriftart, und Zeile 2 zeigt die Ersetzung der Standardglyphen durch Schwung Glyphen.

Spezifikationen

Specification
CSS Fonts Module Level 4 # font-rend-desc

Browser-Kompatibilität

Siehe auch

Andere @font-face Deskriptoren: font-family, font-style, font-variation-settings, font-weight, src
Verwandte Schriftsatz-Eigenschaften: font-feature-settings, font-variant-alternates, font-variation-settings

Help improve MDN

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

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