font-variant-numericVara CSS toetab Type font formaat määrates mis numbriline glyphs kasutada iga klassi, sealhulgas variante fraktsioonid, ordinal markerid ja stiilis variatsioone teiste hulgas.
Väike kontekst
Kipume arvama, et arvud on staatiline glüüf. See prindib ja nii see on. Numbrid on aga selles mõttes palju rohkem tähestikukujulised, et neil võivad olla variandid, mille tõttu tasub stiili muuta. Me räägime sellistest asjadest nagu murdosad (nt 1/4), ordinaalid (nt 1.) ja isegi samaväärsed suurtähed ja väiketähed. Erinevalt tähtedest ei muuda need variatsioonid aga sisu tähendust, ehkki pakuvad lisakonteksti või mõjutavad loetavust.
Selle omadusega hõõrumine seisneb selles, et see oli mõeldud töötama OpenType-toega fontidega, uue, kuid kiiresti areneva fondivorminguga, mis pakub ulatuslikumat glüüfide komplekti, mida saab sihtida erinevates kontekstides kasutamiseks. Võite sageli kuulda, et OpenType'i nimetatakse muutuvaks fondiks ja see on sellepärast, et need sisaldavad suuremat sorti märke, mis muudavad need paindlikumaks mitmesuguste kasutusviiside jaoks. Kõigi asjade variatsioonid!
Küsimus on selles, et fontide kättesaadavus, mis suudavad kõiki võimalusi ära kasutada font-variantja font-variant-numericon piiratud. OpenType'iga ühilduvaid fonte on üha rohkem, kuid on palju väiksem valik alamhulki, mis kasutavad kõiki pakutavaid funktsioone font-variant-numericning on sageli esmaklassilised ja kallid. Richard Butler võtab selle kenasti kokku:
Meie käsutuses on „suured” numbrid, mida nimetatakse joone- või pealkirjanumbriteks, ja „väikesed” numbrid, mida nimetatakse vanastiiliseks või tekstinumbriks. lubatud ja professionaalsed vahendid, mis on loodud mõlema numbrikomplektiga.
Suurim probleem, millega tavaliselt CSS-i atribuutide osas muretseme, on brauseritugi, kuid see omadus ja kõik muud seotud font-varianton ka fontide kujundajate meelehead, et tabelisse täielik tugi tuua.
See on populaarne, kuid me näeme, et isegi selle kirjutamise ajal ilmuvad rohkem "kaasaegseid" ja "professionaalseid" fonte. Adobe TypeKit teatas, et see on töö OpenType-funktsioonide toetamiseks ja kuuldavasti on Google Fonts ka praegu pardal, kuna Chrome 62 neid toetab.
Põhikasutus
See on vara põhiline kasutusviis:
.fraction ( font-variant-numeric: diagonal-fractions; )Vanemad brauserid seda ei tunnista, kuid aktsepteerivad siiski seda, font-feature-settingsmis avab samad funktsioonid erinevate väärtustega. Sügavama toe saamiseks saame paaritada kaks omadust:
.fraction ( font-feature-settings: frac; font-variant-numeric: diagonal-fractions; )Või võime selle kohandada brauseri toe nuusutamiseks, @supportsnii et uut atribuuti pakutakse ainult toetavatele brauseritele:
.fraction ( font-feature-settings: frac; ) @supports (font-variant-numeric: diagonal-fractions) ( .fraction ( font-feature-settings: frac; font-variant-numeric: diagonal-fractions; ) )Väärtused
font-variant-numericVara saab kasutada järgmisi väärtusi. Vastav font-feature-settingsväärtus märgitakse viitena.
Üldised väärtused
| Väärtus | Kirjeldus | Funktsiooni seadistamine |
|---|---|---|
normal | Ükski allpool loetletud funktsioonidest pole lubatud. | Puudub |
ordinal | Rakendab tähti numbrite järjekorra tähistamiseks, tavaliselt ülaindeksi kujul. | ordn |
slashed-zero | Kuvab vahelduvvormi nullist, mida läbib diagonaaljoon. | zero |
Numbrilised joonisväärtused
| Väärtus | Kirjeldus | Funktsiooni seadistamine |
|---|---|---|
lining-nums | Numbrid, mis paiknevad vertikaalselt ülespoole, nii et need jäävad samale kõrgusele, on joondatud samal tasapinnal. | lnum |
oldstyle-nums | Võimaldab alternatiivset vertikaalset joondust, kus numbreid ei kuvata alati samal baasjoonel ühtlaselt. | onum |
Numbrilised murdväärtused
| Väärtus | Kirjeldus | Funktsiooni seadistamine |
|---|---|---|
diagonal-fractions | Kuvab murdosa väiksemas vormingus, kus lugeja (ülemine number) ja nimetaja (alumine number) jagatakse diagonaalse kaldkriipsuga. | frac |
stacked-fractions | Kuvab murdosa väiksemas vormingus, kus lugeja ja nimetaja on üksteise peale laotud ja jagatud horisontaaljoonega. | afrc |
Numbrilised vaheväärtused
| Väärtus | Kirjeldus | Funktsiooni seadistamine |
|---|---|---|
proportional-nums | Võimaldab numbritel võtta enda jaoks ruumi, mis ei pruugi tingimata olla võrdne teiste numbritega. | pnum |
tabular-nums | Kuvab tabeliandmekontekstides puhta vormindamise jaoks võrdse suuruse, proportsiooni ja vahedega numbrid. | tnum |
Spetsifikatsioon sisaldab erimärget kasutamise kohta, ordinalkuna see sarnaneb ülaindeksi supelemendiga, kuid on tähistatud erinevalt.
Ülaindeksid:
sup ( font-variant-position: super; )Two squared is 22Järjestusmarkerite puhul:
.ordinal ( font-variant-numeric: ordinal; )1stBrauseri tugi
font-variant-numericVara on praegu osa CSS Fondid Module Level 3 spetsifikatsioon, mis on Võimalik soovitus staatuse ajal seda kirjalikult, mis tähendab, et võib iga hetk muutuda.
Töölaud
| Chrome | Edge | Firefox | IE | Ooper | Safari |
|---|---|---|---|---|---|
| 52 | Ei | 34 | Ei | 39 | 9.1 |
Firefox 24-34 (eksklusiivne) toetab layout.css.font-features.enabledeelistuse taga olevat vara, kui see on seatud true.
Mobiilne
| Androidi brauser | Chrome Android | Edge | Firefox | IE | Opera Android | iOS-i Safari |
|---|---|---|---|---|---|---|
| 52 | 52 | Ei | 34 | Ei | 39 | Jah |