font-feature-settings

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017.

Die font-feature-settings CSS Eigenschaft steuert erweiterte typografische Funktionen in OpenType-Schriften.

Probieren Sie es aus

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;
font-feature-settings:
  "smcp",
  "swsh" 2;

/* Global values */
font-feature-settings: inherit;
font-feature-settings: initial;
font-feature-settings: revert;
font-feature-settings: revert-layer;
font-feature-settings: unset;

Wann immer möglich, sollten Web-Autoren stattdessen die font-variant Kurzschreibweise oder eine dazugehörige Langform-Eigenschaft wie font-variant-ligatures, font-variant-caps, font-variant-east-asian, font-variant-alternates, font-variant-numeric oder font-variant-position verwenden.

Diese führen zu effektiveren, vorhersagbaren und verständlicheren Ergebnissen als font-feature-settings, das eine Low-Level-Funktion ist, die entwickelt wurde, um spezielle Fälle zu behandeln, in denen es keinen anderen Weg gibt, ein OpenType-Schriftmerkmal zu aktivieren oder darauf zuzugreifen. Insbesondere sollte font-feature-settings nicht verwendet werden, um Kapitälchen zu aktivieren.

Werte

Diese Eigenschaft wird entweder als das Schlüsselwort normal oder als eine kommaseparierte Liste von <feature-tag-value> Werten angegeben. Beim Rendern von Text werden die Liste der OpenType <feature-tag-value> Werte an die Textlayout-Engine übergeben, um Schriftmerkmale zu aktivieren oder zu deaktivieren.

normal

Gibt an, dass Text mit den Standardeinstellungen der Schriftart formatiert 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 eine <string> von vier ASCII Zeichen. Wenn der Tag-Name mehr oder weniger Zeichen hat oder Zeichen außerhalb des U+20U+7E Codepunktbereichs 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 angegeben ist, ist der Standardwert 1. Für nicht-boolesche OpenType-Funktionen (z. B. stilistische Alternativen) impliziert der Wert die Auswahl eines bestimmten Glyphen; für boolesche Funktionen aktiviert oder deaktiviert der Wert die Funktion.

Formale Definition

Anfangswertnormal
Anwendbar aufall elements and text. Auch anwendbar auf ::first-letter und ::first-line.
VererbtJa
Berechneter Wertwie angegeben
Animationstypdiskret

Formale Syntax

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

<feature-tag-value> =
<opentype-tag> [ <integer [0,∞]> | on | off ]?

<opentype-tag> =
<string>

Beispiele

Aktivierung verschiedener Schriftmerkmale

css
/* use small-cap alternate glyphs */
.small-caps {
  font-feature-settings: "smcp" on;
}

/* convert both upper and lowercase to small caps (affects punctuation also) */
.all-small-caps {
  font-feature-settings: "c2sc", "smcp";
}

/* use zeros with a slash through them to differentiate from "O" */
.nice-zero {
  font-feature-settings: "zero";
}

/* enable historical forms */
.historical {
  font-feature-settings: "hist";
}

/* disable common ligatures, usually on by default */
.no-ligatures {
  font-feature-settings: "liga" 0;
}

/* enable tabular (monospaced) figures */
td.tabular {
  font-feature-settings: "tnum";
}

/* enable automatic fractions */
.fractions {
  font-feature-settings: "frac";
}

/* use the second available swash character */
.swash {
  font-feature-settings: "swsh" 2;
}

/* enable stylistic set 7 */
.fancy-style {
  font-family: Gabriola;
  font-feature-settings: "ss07";
}

Spezifikationen

Specification
CSS Fonts Module Level 4
# font-feature-settings-prop

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
font-feature-settings
normal

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

Siehe auch