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+20 – U+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

BCD tables only load in the browser

Siehe auch