Font-feature-settings - CSS-trükkök

Anonim

Ez a tulajdonság lehetővé teszi számunkra a fejlett tipográfiai beállítások, például a kis sapkák, a ligatúrák és az alakváltozások ellenőrzését. Ha aktiválni őket, akkor ki kell jelentenie, hogy melyik érték van szüksége idézőjelbe, majd ezt követően sem 1, vagy onhogy lehetővé tegye. Azt is megteheti, tiltsa le őket akár 0, vagy off:

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

A font-feature-settingstulajdonságok mellett a standard ligatúrák mellett számos más érték is támogatott , beleértve a kis sapkákat is:

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

Értékek

Ez egy lista minden értékről, amelyet támogat font-feature-settings, de mielőtt kipróbálná, ellenőrizze, hogy a használt webes betűtípus is támogatja ezeket az értékeket:

  • liga: standard ligatúrák
  • dlig: diszkrecionális kötések
  • onum: régi stílusú figurák
  • lnum: bélés figurák
  • tnum: táblázatos ábrák
  • zero: vágott nulla
  • frac: törtek
  • sups: felső index
  • subs: index
  • smcp: kis sapkák
  • c2sc: kis fővárosok fővárosokból
  • case: kis- és nagybetűk
  • hlig: történelmi ligatúrák
  • calt: kontextus váltakozik
  • swsh: csapdák
  • hist: történelmi formák
  • ss**: stilisztikai készletek
  • kern: kerning
  • locl: lokalizált formák
  • rlig: szükséges kötések
  • medi: mediális formák
  • init: kezdeti formák
  • isol: elszigetelt formák
  • fina: végleges formák
  • mark: Mark
  • mkmk mark-to-mark pozicionálás

Több beállítás kombinálása

Több funkció hozzáadásához az egyik értéket a másiknak kell követnie a vesszővel elválasztott listában, például:

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

Előtagok

A böngésző spektrumának legjobb támogatásához feltétlenül használja ezeket az előtagokat:

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

Böngésző támogatás

Ez a böngésző támogatási adat a Caniuse cégtől származik, amely részletesebben szerepel. Egy szám azt jelzi, hogy a böngésző támogatja az adott és újabb verziók szolgáltatásait.

Asztal

Króm Firefox AZAZ Él Szafari
21 * 15 * 10. 12. 9.1

Mobil / Tablet

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

Több információ

  • Typotheque: OpenType funkciók a böngészőkben - tesztek
  • W3C
  • MDN
  • Richard Rutter CSS3 homokozója