Ustawienia czcionek - CSS-Tricks

Anonim

Ta właściwość daje nam kontrolę nad zaawansowanymi ustawieniami typograficznymi, takimi jak kapitaliki, ligatury i znaki kaligraficzne. Aby je aktywować, musisz zadeklarować, której wartości potrzebujesz w cudzysłowach, a następnie zaznaczyć 1lub, onaby włączyć. Alternatywnie, można je wyłączyć albo z 0albo off:

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

font-feature-settingsWłaściwość obsługuje wiele innych wartości, oprócz standardowych ligatur , w tym kapitaliki:

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

Wartości

To jest lista wszystkich wartości, które są obsługiwane przez font-feature-settings, ale przed wypróbowaniem sprawdź, czy czcionka internetowa, której używasz, również obsługuje te wartości:

  • liga: standardowe ligatury
  • dlig: ligatury uznaniowe
  • onum: postacie w starym stylu
  • lnum: figury podszewkowe
  • tnum: dane tabelaryczne
  • zero: przecięte zero
  • frac: frakcje
  • sups: indeks górny
  • subs: indeks
  • smcp: małe czapki
  • c2sc: małe stolice od wielkich liter
  • case: formularze z rozróżnianiem wielkości liter
  • hlig: ligatury historyczne
  • calt: kontekstowe alternatywy
  • swsh: znaki kaligraficzne
  • hist: formy historyczne
  • ss**: zestawy stylistyczne
  • kern: kerning
  • locl: zlokalizowane formularze
  • rlig: wymagane ligatury
  • medi: formy medialne
  • init: formy początkowe
  • isol: pojedyncze formularze
  • fina: formy końcowe
  • mark: znak
  • mkmk pozycjonowanie mark-to-mark

Łączenie wielu ustawień

Aby dodać wiele funkcji, musisz następować po jednej wartości na liście oddzielonej przecinkami, na przykład:

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

Przedrostki

Aby uzyskać najlepszą obsługę w całym spektrum przeglądarek, upewnij się, że używasz tych przedrostków:

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

Wsparcie przeglądarki

Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.

Pulpit

Chrom Firefox TO ZNACZY Brzeg Safari
21 * 15 * 10 12 9.1

Telefon komórkowy / tablet

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

Więcej informacji

  • Typotheque: funkcje OpenType w przeglądarkach internetowych - testy
  • W3C
  • MDN
  • Sandbox CSS3 Richarda Ruttera