Font-feature-settings - CSS-tricks

Anonim

Denne egenskab giver os kontrol over avancerede typografiske indstillinger såsom små bogstaver, ligaturer og swashes. For at aktivere dem skal du erklære, hvilken værdi du har brug for i anførselstegn og derefter efterfulgt af en af 1eller for onat 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 værdier, foruden standard ligaturer, understøttes af font-feature-settingsejendommen, herunder små bogstaver:

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

Værdier

Dette er en liste over hver værdi, der understøttes af font-feature-settings, men sørg for at kontrollere den webskrifttype, du bruger, understøtter også disse værdier, før du prøver dem:

  • liga: standard ligaturer
  • dlig: diskretionære ligaturer
  • onum: gamle stilfigurer
  • lnum: foringstal
  • tnum: figurer i tabelform
  • zero: skåret nul
  • frac: fraktioner
  • sups: overskrift
  • subs: abonnement
  • smcp: små hætter
  • c2sc: små hovedstæder fra hovedstæder
  • case: store og små bogstaver
  • hlig: historiske ligaturer
  • calt: kontekstuelle suppleanter
  • swsh: swashes
  • hist: historiske former
  • ss**: stilistiske sæt
  • kern: kerning
  • locl: lokaliserede formularer
  • rlig: krævede ligaturer
  • medi: mediale former
  • init: oprindelige formularer
  • isol: isolerede former
  • fina: endelige formularer
  • mark: mærke
  • mkmk mark-to-mark positionering

Kombinerer flere indstillinger

For at tilføje flere funktioner skal du følge en værdi efter en anden i en komma-adskilt liste som sådan:

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

Præfikser

For at få den bedste support på tværs af browserspektret skal du sørge for at bruge disse præfikser:

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

Browsersupport

Denne browsersupportdata er fra Caniuse, som har flere detaljer. Et tal angiver, at browseren understøtter funktionen i den version og opefter.

Desktop

Chrome Firefox IE Edge Safari
21 * 15 * 10 12 9.1

Mobil / tablet

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

Mere information

  • Typotheque: OpenType-funktioner i webbrowsere - Tests
  • W3C
  • MDN
  • Richard Rutter's CSS3 sandkasse