Font-feature-settings - CSS-temppuja

Anonim

Tämä ominaisuus antaa meille mahdollisuuden hallita edistyneitä typografisia asetuksia, kuten pieniä korkkeja, sidoksia ja pyyhkäisyjä. Aktivoidaksesi ne, sinun on ilmoitettava tarvitsemasi arvo lainausmerkeissä ja sen jälkeen joko 1tai on. Vaihtoehtoisesti voit poistaa ne käytöstä joko 0tai off:

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

font-feature-settingsOmaisuus tukee monia muita arvoja tavallisten ligatuurien lisäksi , mukaan lukien pienet korkit:

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

Arvot

Tämä on luettelo kaikista tuetuista arvoista font-feature-settings, mutta muista tarkistaa käyttämäsi verkkofontti myös näitä arvoja ennen kuin kokeilet niitä:

  • liga: tavalliset ligatuurit
  • dlig: harkinnanvaraiset ligatuurit
  • onum: vanhan tyylin hahmot
  • lnum: vuori luvut
  • tnum: taulukkokuviot
  • zero: leikattu nolla
  • frac: jakeet
  • sups: yläindeksi
  • subs: alaindeksi
  • smcp: pienet korkit
  • c2sc: pienet pääkaupungit pääkaupungeista
  • case: kirjainkoon mukaiset muodot
  • hlig: historialliset sidokset
  • calt: asiayhteysvaihtoehdot
  • swsh: pyyhkäisee
  • hist: historialliset muodot
  • ss**: tyylisarjat
  • kern: kerning
  • locl: lokalisoidut lomakkeet
  • rlig: vaaditut sidokset
  • medi: mediaaliset muodot
  • init: alkulomakkeet
  • isol: eristetyt muodot
  • fina: lopulliset lomakkeet
  • mark: merkki
  • mkmk mark-to-mark-paikannus

Yhdistämällä useita asetuksia

Jos haluat lisätä useita ominaisuuksia, sinun on seurattava yhtä arvoa toisella pilkuilla erotetussa luettelossa, kuten:

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

Etuliitteet

Saadaksesi parhaan tuen kaikilla selaimen taajuuksilla, muista käyttää näitä etuliitteitä:

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

Selaimen tuki

Nämä selaintukitiedot ovat Caniuselta, jolla on tarkempia tietoja. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa tai uudemmassa.

Työpöytä

Kromi Firefox IE Reuna Safari
21 * 15 * 10 12 9.1

Matkapuhelin / tabletti

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

Lisää tietoa

  • Typotheque: OpenType-ominaisuudet selaimissa - testit
  • W3C
  • MDN
  • Richard Rutterin CSS3-hiekkalaatikko