Font-feature-settings - CSS-Tricks

Anonim

Această proprietate ne oferă control asupra setărilor tipografice avansate, cum ar fi majuscule, ligaturi și swashes. Pentru a le activa trebuie să declarați care este valoarea de care aveți nevoie în ghilimele și apoi urmată de una 1sau onpentru a activa. Alternativ, le puteți dezactiva cu oricare dintre 0sau off:

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

Multe alte valori, pe lângă ligaturile standard, sunt acceptate de font-feature-settingsproprietate, inclusiv majuscule:

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

Valori

Aceasta este o listă cu fiecare valoare acceptată font-feature-settings, dar asigurați-vă că verificați fontul web pe care îl utilizați acceptă și aceste valori înainte de a le încerca:

  • liga: ligaturi standard
  • dlig: ligaturi discreționare
  • onum: figuri de stil vechi
  • lnum: figuri de căptușeală
  • tnum: figuri tabulare
  • zero: redus zero
  • frac: fracțiuni
  • sups: superscript
  • subs: indice
  • smcp: litere mici
  • c2sc: mici majuscule din majuscule
  • case: forme sensibile la majuscule
  • hlig: ligaturi istorice
  • calt: alternative contextuale
  • swsh: swashes
  • hist: forme istorice
  • ss**: seturi stilistice
  • kern: kerning
  • locl: forme localizate
  • rlig: ligaturi necesare
  • medi: forme mediale
  • init: forme inițiale
  • isol: forme izolate
  • fina: forme finale
  • mark: marcă
  • mkmk poziționare marca-la-marcare

Combinând mai multe setări

Pentru a adăuga mai multe funcții, trebuie să urmați o valoare cu alta într-o listă separată prin virgulă, astfel:

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

Prefixe

Pentru a obține cea mai bună asistență din spectrul browserului, asigurați-vă că utilizați aceste prefixe:

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

Suport pentru browser

Aceste date de asistență pentru browser provin de la Caniuse, care are mai multe detalii. Un număr indică faptul că browserul acceptă funcția în versiunea respectivă și în sus.

Desktop

Crom Firefox IE Margine Safari
21 * 15 * 10 12 9.1

Mobil / Tabletă

Android Chrome Android Firefox Android Safari iOS
88 85 4.4 * 9.3

Mai multe informatii

  • Typotheque: caracteristici OpenType în browserele web - Teste
  • W3C
  • MDN
  • Sandbox CSS3 al lui Richard Rutter