font-feature-settings CSS Attribut-Deskriptor

Syntax

/* 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 eine kommagetrennte Liste von <feature-tag-value> Werten angegeben. Beim Rendern von Text wird die Liste der OpenType <feature-tag-value> Werte an die Text-Layout-Engine übergeben, um Schriftfeatures zu aktivieren oder zu deaktivieren.

normal

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

<feature-tag-value>

Stellt ein Leerzeichen-getrenntes Paar bestehend aus einem Tag-Namen und einem optionalen Wert dar.

Der Tag-Name ist immer ein <string> mit vier ASCII Zeichen. Wenn der Tag-Name mehr oder weniger Zeichen hat oder Zeichen außerhalb des U+20 – U+7E Code-Punkt-Bereichs 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 gesetzt ist, beträgt der Standardwert 1. Für nicht-boolesche OpenType-Features (z.B. stilistische Alternativen) impliziert der Wert ein bestimmtes Glyphe, das ausgewählt werden soll; für boolesche Features schaltet der Wert das Feature ein oder aus.

Formale Definition

Formale Syntax

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

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

<opentype-tag> = 
  <string>  

<integer> = 
  <number-token>  

Beispiele

Aktivierung von Schnörkel-Glyphen mithilfe der @font-face Regel

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

HTML

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

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 Standardgeschmückte Design der MonteCarlo Schriftart, und Zeile 2 zeigt die Standardglyphen, die durch Schnörkel Glyphen ersetzt werden.

Spezifikationen

Browser-Kompatibilität

Siehe auch

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