font-feature-settings

Diese Eigenschaft gibt uns Kontrolle über fortgeschrittene typografische Einstellungen wie Kapitälchen, Ligaturen und Schwünge. Um sie zu aktivieren, müssen Sie den benötigten Wert in Anführungszeichen angeben und dann entweder mit 1 oder on zum Aktivieren. Alternativ können Sie sie mit 0 oder off deaktivieren.

.element {  
  /* these two values do the same thing */
  font-feature-settings: "liga" 1;
  font-feature-settings: "liga1" on;
}

Viele andere Werte, neben Standardligaturen, werden von der font-feature-settings-Eigenschaft unterstützt, einschließlich Kapitälchen.

.element {
  font-feature-settings: "smcp" 1; 
}

Werte

Dies ist eine Liste aller Werte, die von font-feature-settings unterstützt werden. Stellen Sie jedoch sicher, dass die von Ihnen verwendete Web-Schriftart diese Werte ebenfalls unterstützt, bevor Sie sie ausprobieren.

• liga: Standardligaturen
• dlig: Discretionary Ligaturen
• onum: alte Ziffern
• lnum: Lining-Ziffern
• tnum: Tabellenziffern
• zero: durchgestrichene Null
• frac: Brüche
• sups: hochgestellt
• subs: tiefgestellt
• smcp: Kapitälchen
• c2sc: Kapitälchen aus Großbuchstaben
• case: Groß-/Kleinschreibung-sensitive Formen
• hlig: historische Ligaturen
• calt: kontextbezogene Alternativen
• swsh: Schwünge
• hist: historische Formen
• ss**: Stilistische Sets
• kern: Spationierung
• locl: lokalisierte Formen
• rlig: erforderliche Ligaturen
• medi: mittlere Formen
• init: initiale Formen
• isol: isolierte Formen
• fina: finale Formen
• mark: Markierung
• mkmk Mark-to-Mark-Positionierung

Kombinieren mehrerer Einstellungen

Um mehrere Funktionen hinzuzufügen, müssen Sie einen Wert durch einen anderen in einer durch Kommas getrennten Liste gefolgt angeben, so:

.element {
  font-feature-settings:"smcp" 1, "onum" 1;
}

Präfixe

Um die beste Unterstützung über das Browser-Spektrum hinweg zu erzielen, stellen Sie sicher, dass Sie diese Präfixe verwenden.

.element {
  -webkit-font-feature-settings: "smcp" 1;
  -moz-font-feature-settings:    "smcp" 1;
  -ms-font-feature-settings:     "smcp" 1;
  font-feature-settings:         "smcp" 1;
}

Browser-Unterstützung

Weitere Informationen

• Typotheque: OpenType-Funktionen in Webbrowsern — Tests
• W3C
• MDN
• Richard Rutters CSS3 Sandbox