Font-feature-settings - CSS-triks

Anonim

Denne egenskapen gir oss kontroll over avanserte typografiske innstillinger som små bokstaver, ligaturer og swashes. For å aktivere dem må du oppgi hvilken verdi du trenger i anførselstegn, og deretter etterfølges av en av 1eller for onå aktivere. Alternativt kan du deaktivere dem med enten 0eller off:

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

Mange andre verdier, foruten standard ligaturer, støttes av font-feature-settingseiendommen, inkludert små bokstaver:

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

Verdier

Dette er en liste over alle verdiene som støttes av font-feature-settings, men sørg for å sjekke webfonten du bruker, støtter også disse verdiene før du prøver dem:

  • liga: standard ligaturer
  • dlig: skjønnsmessige ligaturer
  • onum: gamle stilfigurer
  • lnum: fôrfigurer
  • tnum: figurer i tabell
  • zero: kuttet null
  • frac: brøker
  • sups: overskrift
  • subs: abonnement
  • smcp: små caps
  • c2sc: små hovedsteder fra hovedsteder
  • case: store og små bokstaver
  • hlig: historiske ligaturer
  • calt: kontekstuelle veksler
  • swsh: swashes
  • hist: historiske former
  • ss**: stilistiske sett
  • kern: kerning
  • locl: lokaliserte skjemaer
  • rlig: nødvendige ligaturer
  • medi: mediale former
  • init: innledende skjemaer
  • isol: isolerte former
  • fina: endelige skjemaer
  • mark: merke
  • mkmk mark-to-mark posisjonering

Kombinere flere innstillinger

For å legge til flere funksjoner må du følge en verdi av en annen i en kommaadskilt liste, slik:

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

Prefikser

For å få best støtte over nettleserspekteret, sørg for å bruke disse prefiksene:

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

Nettleserstøtte

Disse nettleserstøttedataene er fra Caniuse, som har flere detaljer. Et tall indikerer at nettleseren støtter funksjonen i den versjonen og oppover.

Desktop

Chrome Firefox DVS Kant Safari
21 * 15 * 10 12 9.1

Mobil / nettbrett

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

Mer informasjon

  • Typotheque: OpenType-funksjoner i nettlesere - Tester
  • W3C
  • MDN
  • Richard Rutter's CSS3 Sandbox