font-variant-numericHotel v CSS podpira OpenType obliko pisave z navedbo, ki numerične simboli za uporabo v razredu, vključno z različicami za frakcij, zaporedna označevalcev in styled variacij med drugim.
Majhen kontekst
Števila ponavadi mislimo kot statični glif. Natisne in tako je. Številke pa so veliko bolj podobne abecednim črkam v tem smislu, da imajo lahko različice, zaradi katerih je vredno spremeniti slog. Govorimo o stvareh, kot so ulomki (npr. 1/4), redni znaki (npr. 1.) in celo enakovredne velike in male črke. Vendar v nasprotju s črkami te različice ne spreminjajo pomena vsebine, čeprav dajejo dodaten kontekst ali vplivajo na čitljivost.
Ta lastnost je, da je bila zasnovana za delo s pisavami, ki podpirajo OpenType, novo, a hitro razvijajočo se obliko pisave, ki ponuja obsežnejši nabor glifov, ki jih je mogoče ciljno uporabljati v različnih kontekstih. Pogosto lahko slišite OpenType, ki se imenuje spremenljive pisave, in sicer zato, ker vsebujejo večje število znakov, zaradi česar so prilagodljivejši za različne namene. Različice za vse stvari!
Vprašanje je, da je razpoložljivost pisav, ki lahko v celoti izkoristijo font-variantin font-variant-numericomejena. Vedno več je pisav, združljivih z OpenType, vendar obstaja veliko manjša podskupina možnosti, ki izkoriščajo vse font-variant-numericponujene funkcije, ki so pogosto premium in drage. Richard Butler to lepo povzame:
Na voljo imamo 'velike' številke, imenovane podloge ali naslovne številke, in 'male' številke, imenovane stare ali besedilne številke. ... Prav tako velja, da velika večina pisav ni niti moderna niti profesionalna, če sodobna pomeni OpenType- omogočena in profesionalna sredstva, zasnovana z obema nizoma številk.
Največja težava, s katero se običajno ukvarjamo z lastnostmi CSS, je podpora brskalnika, toda ta lastnost in vse druge, povezane z njo, font-variantso tudi na milost in nemilost oblikovalcev pisav, ki nudijo popolno podporo mizi.
To je neprijetno, vendar se začenjajo pojavljati bolj sodobne in profesionalne pisave, tudi v času pisanja tega članka. Adobe TypeKit je sporočil, da deluje na področju podpore funkcij OpenType, govorilo pa se je tudi, da je na voljo tudi Google Fonts zdaj, ko jih Chrome 62 podpira.
Osnovna uporaba
To je najosnovnejša uporaba nepremičnine:
.fraction ( font-variant-numeric: diagonal-fractions; )Starejši brskalniki tega ne bodo prepoznali, vendar sprejmejo, font-feature-settingski odklenejo iste funkcije z različnimi vrednostmi. Za poglobljeno podporo lahko združimo dve lastnosti:
.fraction ( font-feature-settings: frac; font-variant-numeric: diagonal-fractions; )Ali pa lahko to prilagodimo tako, da izničimo podporo brskalnika, @supportstako da je nova lastnost namenjena samo podpori brskalnikov:
.fraction ( font-feature-settings: frac; ) @supports (font-variant-numeric: diagonal-fractions) ( .fraction ( font-feature-settings: frac; font-variant-numeric: diagonal-fractions; ) )Vrednote
font-variant-numericLastnina sprejema naslednje vrednosti. Ustrezna font-feature-settingsvrednost je navedena kot referenca.
Splošne vrednote
| Vrednost | Opis | Nastavitev lastnosti |
|---|---|---|
normal | Nobena od spodaj naštetih funkcij ni omogočena. | N / A |
ordinal | Uporablja črke za predstavitev številskega vrstnega reda, običajno v obliki nadpisa. | ordn |
slashed-zero | Prikaže nadomestno obliko ničle z diagonalno črto, ki poteka skozinjo. | zero |
Numerične slikovne vrednosti
| Vrednost | Opis | Nastavitev lastnosti |
|---|---|---|
lining-nums | Vrstice se štejejo navpično, tako da se držijo iste višine, so poravnane na isti ravnini. | lnum |
oldstyle-nums | Omogoča nadomestno navpično poravnavo, kjer številke niso vedno enakomerno prikazane na isti osnovni črti. | onum |
Vrednosti številskih ulomkov
| Vrednost | Opis | Nastavitev lastnosti |
|---|---|---|
diagonal-fractions | Prikaže ulomke v manjšem formatu, pri čemer sta števec (zgornja številka) in imenovalec (spodnja številka) deljena z diagonalno poševnico. | frac |
stacked-fractions | Prikaže ulomke v manjšem formatu, kjer sta števec in imenovalec zložena eden na drugega in deljena z vodoravno črto. | afrc |
Številske razmične vrednosti
| Vrednost | Opis | Nastavitev lastnosti |
|---|---|---|
proportional-nums | Številkam omogoča, da zavzamejo svojo lastno količino prostora, ki ni nujno enaka po širini kot druge številke. | pnum |
tabular-nums | Prikaže številke z enako velikostjo, sorazmernostjo in razmikom za čisto oblikovanje v kontekstu tabelarnih podatkov. | tnum |
Specifikacija vključuje posebno opombo o uporabi, ordinalker je podobna nadpisnemu supelementu, vendar je označena drugače.
Za nadpise:
sup ( font-variant-position: super; )Two squared is 22Za redne označevalce:
.ordinal ( font-variant-numeric: ordinal; )1stPodpora za brskalnik
font-variant-numericLastnost je trenutno del 3 specifikacije CSS pisave modul ravni, ki je status kandidatke Priporočila v času tega pisanja, ki pomeni lahko spremeni v vsakem trenutku.
Namizje
| Chrome | Rob | Firefox | IE | Opera | Safari |
|---|---|---|---|---|---|
| 52 | Ne | 34 | Ne | 39 | 9.1 |
Firefox 24-34 (ekskluzivno) podpira lastnost za layout.css.font-features.enabledpreferenco, ko je nastavljena na true.
Mobilni
| Brskalnik Android | Chrome Android | Rob | Firefox | IE | Opera Android | iOS Safari |
|---|---|---|---|---|---|---|
| 52 | 52 | Ne | 34 | Ne | 39 | Da |