Font-feature-settings - CSS-trikid

Anonim

See omadus annab meile kontrolli täpsemate tüpograafiliste seadete, näiteks väikeste mütside, ligatuuride ja joonte üle. Nende aktiveerimiseks peate deklareerima, millist väärtust vajate jutumärkides, ja seejärel lubamiseks sisestage kas 1või on. Teise võimalusena võite need keelata kas ühe 0või teise abil off.

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

Lisaks standardsetele ligatuuridele toetab font-feature-settingsvara palju muid väärtusi , sealhulgas väikesed korgid:

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

Väärtused

See on loend kõigist väärtustest, mida see toetab font-feature-settings, kuid enne proovimist kontrollige kindlasti, kas teie kasutatav veebifond toetab ka neid väärtusi:

  • liga: standardsed ligatuurid
  • dlig: valikulised ligatuurid
  • onum: vana stiili kujundid
  • lnum: voodrikujud
  • tnum: tabelarvud
  • zero: kärbitud null
  • frac: murrud
  • sups: ülaindeks
  • subs: alaindeks
  • smcp: väikesed mütsid
  • c2sc: väikesed pealinnad pealinnadest
  • case: tõstutundlikud vormid
  • hlig: ajaloolised ligatuurid
  • calt: kontekstuaalsed vaheldumisi
  • swsh: lööb
  • hist: ajaloolised vormid
  • ss**: stiilikomplektid
  • kern: kerning
  • locl: lokaliseeritud vormid
  • rlig: vajalikud ligatuurid
  • medi: mediaalsed vormid
  • init: algvormid
  • isol: isoleeritud vormid
  • fina: lõplikud vormid
  • mark: märk
  • mkmk märk-märgini positsioneerimine

Mitme sätte kombineerimine

Mitme funktsiooni lisamiseks peate komadega eraldatud loendis järgima ühte väärtust, näiteks:

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

Eesliited

Parima toe saamiseks kogu brauserispektris kasutage kindlasti neid eesliiteid:

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

Brauseri tugi

Need brauseri tugiandmed pärinevad Caniuse'ilt, millel on üksikasjalikum teave. Number näitab, et brauser toetab selle versiooni ja uuemat funktsiooni.

Töölaud

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

Mobiil / tahvelarvuti

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

Rohkem informatsiooni

  • Tüpoteek: OpenType'i funktsioonid veebibrauserites - testid
  • W3C
  • MDN
  • Richard Rutteri CSS3 liivakast