font-feature-settings

Der font-feature-settings CSS-Deskriptor ermöglicht es Ihnen, die Anfangseinstellungen für die Schriftart festzulegen, die durch die @font-face-Regel definiert wird. Sie können diesen Deskriptor weiter nutzen, um typografische Schriftmerkmale wie Ligaturen, Kapitälchen und Zierschwü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 auf das Schriftobjekt in der @font-face-Regel und nicht auf ein gesamtes Element setzt, können nur einige Glyphen in einem Element unter Verwendung dieses Deskriptors 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 Schlüsselwort normal oder als kommaseparierte 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 Schriftmerkmale zu aktivieren oder zu deaktivieren.

normal

Zeigt an, dass der Text unter Verwendung der standardmäßigen Schrifteinstellungen gestaltet wird. Dies ist der Standardwert.

<feature-tag-value>

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

Der Tag-Name ist immer ein <string> von 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 bzw. 0. Wenn kein Wert festgelegt ist, beträgt der Standard 1. Bei nicht-boolean OpenType-Merkmalen (z.B. stilistische Alternativen) impliziert der Wert ein bestimmtes Glyphen zur Auswahl; bei boolean-Merkmalen schaltet der Wert das Merkmal ein oder aus.

Formale Definition

Zugehörige @-Regel@font-face
Initialer Wertnormal
Berechneter Wertwie angegeben

Formale Syntax

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

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

<opentype-tag> = 
  <string>

Beispiele

Aktivieren von Zierschwüngen 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

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("montecarlo-regular.woff2");
}
@font-face {
  font-family: MonteCarlo2;
  src: url("montecarlo-regular.woff2");
  font-feature-settings: "swsh" 1;
}
p {
  font-size: 3rem;
  margin: 0.7rem 3rem;
}
.swash-off {
  font-family: MonteCarlo;
}
.swash-on {
  font-family: MonteCarlo2;
}

Ergebnis

Zeile 1 zeigt das standardmäßige, verzierte Design der MonteCarlo-Schriftart, und Zeile 2 zeigt, dass die Standardglyphen durch Zierschwung-Glyphen ersetzt werden.

Spezifikationen

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

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch