Nastavenie funkcií písma - Triky CSS

Anonim

Táto vlastnosť nám poskytuje kontrolu nad pokročilými typografickými nastaveniami, ako sú malé čiapky, ligatúry a znaky typu swash. Ak ich chcete aktivovať, musíte v úvodzovkách deklarovať, ktorú hodnotu potrebujete, a potom musí nasledovať buď 1alebo onpovoliť. Prípadne, môžete ich vypnúť buď 0alebo off:

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

font-feature-settingsVlastnosť podporuje mnoho ďalších hodnôt okrem štandardných ligatúr , vrátane malých písmen:

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

Hodnoty

Toto je zoznam všetkých hodnôt, ktoré podporuje font-feature-settings, ale predtým, ako ich vyskúšate, nezabudnite skontrolovať, ktoré webové písmo, ktoré používate, podporuje aj tieto hodnoty:

  • liga: štandardné ligatúry
  • dlig: diskrečné ligatúry
  • onum: postavy v starom štýle
  • lnum: čísla podšívky
  • tnum: tabuľkové obrázky
  • zero: lomítko nula
  • frac: zlomky
  • sups: horný index
  • subs: dolný index
  • smcp: malé čiapky
  • c2sc: malé veľké písmená od veľkých písmen
  • case: formuláre citlivé na veľké a malé písmená
  • hlig: historické ligatúry
  • calt: kontextové alternatívy
  • swsh: ozdoby
  • hist: historické formy
  • ss**: slohové súbory
  • kern: vyrovnanie párov
  • locl: lokalizované formuláre
  • rlig: požadované ligatúry
  • medi: mediálne formy
  • init: počiatočné formuláre
  • isol: izolované formy
  • fina: konečné formy
  • mark: označiť
  • mkmk umiestnenie značky po značke

Kombinácia viacerých nastavení

Ak chcete pridať viac funkcií, musíte nasledovať jednu hodnotu za druhou v zozname oddelenom čiarkami, napríklad takto:

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

Predpony

Ak chcete získať najlepšiu podporu v celom spektre prehľadávačov, použite tieto predvoľby:

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

Podpora prehliadača

Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.

Desktop

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

Mobil / tablet

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

Viac informácií

  • Typotheque: Funkcie OpenType vo webových prehľadávačoch - Testy
  • W3C
  • MDN
  • Pieskovisko CSS3 Richarda Ruttera