CSS-Deskriptor font-feature-settings für @-Regeln

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 mit dem Schlüsselwort normal oder mit einer durch Kommas getrennten Liste von <feature-tag-value>-Werten angegeben. Beim Rendern von Text wird die Liste der OpenType-<feature-tag-value>-Werte an die Textlayout-Engine übergeben, um Schriftmerkmale zu aktivieren oder zu deaktivieren.

normal

Gibt an, dass für das Textlayout die Standardeinstellungen der Schriftart verwendet werden. Dies ist der Standardwert.

<feature-tag-value>

Stellt ein durch Leerzeichen getrenntes Wertepaar aus einem Tag-Namen und einem optionalen Wert dar.

Der Tag-Name ist immer ein <string> aus vier ASCII-Zeichen. Hat er mehr oder weniger Zeichen oder enthält er Zeichen außerhalb des Codepunktbereichs U+20 – U+7E, 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 entsprechen den Werten 1 beziehungsweise 0. Wird kein Wert angegeben, gilt standardmäßig 1. Bei nicht booleschen OpenType-Merkmalen (z. B. stilistischen Alternativen) bestimmt der Wert, welche Glyphe ausgewählt wird. Bei booleschen Merkmalen aktiviert oder deaktiviert der Wert das Merkmal.

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

Zierschwung-Glyphen mit der @font-face-@-Regel aktivieren

In diesem Beispiel werden der Tag-Name swsh und der boolesche Wert 1 als Wert für den Deskriptor font-feature-settings 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 die standardmäßige, verzierte Darstellung der Schriftart MonteCarlo. Zeile 2 zeigt, wie die Standardglyphen durch Zierschwung-Glyphen ersetzt werden.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Weitere @font-face-Deskriptoren: font-family, font-style, font-variation-settings, font-weight, src
• Verwandte Schrifteigenschaften: font-feature-settings, font-variant-alternates, font-variation-settings