Font-feature-settings - Trucchi CSS

Anonim

Questa proprietà ci dà il controllo su impostazioni tipografiche avanzate come maiuscoletto, legature e ornati. Per attivarli devi dichiarare il valore che ti serve tra virgolette e poi seguito da 1o onper abilitare. In alternativa, puoi disabilitarli con 0o off:

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

Molti altri valori, oltre alle legature standard, sono supportati dalla font-feature-settingsproprietà, incluso il maiuscoletto:

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

Valori

Questo è un elenco di tutti i valori supportati da font-feature-settings, ma assicurati di controllare che il carattere web che stai utilizzando supporti anche questi valori prima di provarli:

  • liga: legature standard
  • dlig: legature discrezionali
  • onum: figure vecchio stile
  • lnum: figure di rivestimento
  • tnum: figure tabulari
  • zero: zero barrato
  • frac: frazioni
  • sups: apice
  • subs: pedice
  • smcp: maiuscoletto
  • c2sc: piccolo maiuscolo da maiuscolo
  • case: forme sensibili al maiuscolo / minuscolo
  • hlig: legature storiche
  • calt: alternative contestuali
  • swsh: ornati
  • hist: forme storiche
  • ss**: set stilistici
  • kern: crenatura
  • locl: forme localizzate
  • rlig: legature obbligatorie
  • medi: forme mediali
  • init: forme iniziali
  • isol: forme isolate
  • fina: forme finali
  • mark: marchio
  • mkmk posizionamento da segno a segno

Combinazione di più impostazioni

Per aggiungere più funzionalità è necessario seguire un valore per un altro in un elenco separato da virgole, in questo modo:

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

Prefissi

Per ottenere il miglior supporto su tutto lo spettro del browser, assicurati di utilizzare questi prefissi:

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

Supporto del browser

Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.

Desktop

Cromo Firefox IE Bordo Safari
21 * 15 * 10 12 9.1

Mobile / Tablet

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

Maggiori informazioni

  • Typotheque: caratteristiche OpenType nei browser web - Test
  • W3C
  • MDN
  • CSS3 Sandbox di Richard Rutter