Font-Feature-Einstellungen - CSS-Tricks

Anonim

Mit dieser Eigenschaft können Sie erweiterte typografische Einstellungen wie Kapitälchen, Ligaturen und Swashes steuern. Um sie zu aktivieren, müssen Sie in Anführungszeichen angeben, welchen Wert Sie benötigen, und anschließend entweder 1oder onaktivieren. Alternativ können Sie sie entweder mit 0oder deaktivieren off:

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

Neben Standardligaturen werden viele andere Werte von der font-feature-settingsEigenschaft unterstützt, einschließlich Kapitälchen:

.element ( font-feature-settings: "smcp" 1; )

Werte

Dies ist eine Liste aller Werte, die von unterstützt werden. font-feature-settingsÜberprüfen Sie jedoch, ob die von Ihnen verwendete Webschrift auch diese Werte unterstützt, bevor Sie sie ausprobieren:

  • liga: Standardligaturen
  • dlig: diskretionäre Ligaturen
  • onum: alte Figuren
  • lnum: Futterfiguren
  • tnum: tabellarische Abbildungen
  • zero: Null aufgeschlitzt
  • frac: Brüche
  • sups: hochgestellt
  • subs: tiefgestellt
  • smcp: Kapitälchen
  • c2sc: kleine Hauptstädte aus Hauptstädten
  • case: Groß- und Kleinschreibung beachten
  • hlig: historische Ligaturen
  • calt: kontextuelle Alternativen
  • swsh: Swashes
  • hist: historische Formen
  • ss**: Stilsets
  • kern: Kerning
  • locl: lokalisierte Formen
  • rlig: erforderliche Ligaturen
  • medi: mediale Formen
  • init: Anfangsformen
  • isol: isolierte Formen
  • fina: endgültige Formen
  • mark: Kennzeichen
  • mkmk Mark-to-Mark-Positionierung

Mehrere Einstellungen kombinieren

Um mehrere Funktionen hinzuzufügen, müssen Sie in einer durch Kommas getrennten Liste einem Wert nach dem anderen folgen:

.element ( font-feature-settings:"smcp" 1, "onum" 1; )

Präfixe

Verwenden Sie die folgenden Präfixe, um die bestmögliche Unterstützung für das gesamte Browserspektrum zu erhalten:

.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

Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.

Desktop

Chrom Feuerfuchs IE Kante Safari
21 * 15* 10 12 9.1

Handy / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 4,4 * 9.3

Mehr Informationen

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