font-variant-numericNekretnina u CSS podržava OpenType font format određivanjem koji se brojčani simboli za upotrebu na klase, uključujući varijacije razlomaka rednim markera i styled varijacije među ostalima.
Mali kontekst
O brojevima obično razmišljamo kao o statičnom glifu. Ispisuje se i to je tako. Međutim, brojevi su puno više poput slova abecede u smislu da mogu imati varijante koje, ovisno o kontekstu, vrijede izmijeniti stil. Govorimo o stvarima poput razlomaka (npr. 1/4), rednih brojeva (npr. 1.), pa čak i ekvivalenta velikih i malih brojeva. Međutim, za razliku od slova, ove varijacije ne mijenjaju značenje sadržaja, iako daju dodatni kontekst ili utječu na čitljivost.
S ovom je osobinom zamišljeno da je dizajniran za rad s fontovima s omogućenim OpenType-om, novim, ali brzo razvijajućim formatom fonta koji pruža širi skup glifa koji se mogu ciljati za upotrebu u različitim kontekstima. Često možete čuti OpenType koji se naziva promjenjivim fontovima, a to je zato što sadrži veću raznolikost znakova što ih čini fleksibilnijima za razne namjene. Varijacije za sve stvari!
Problem je u tome što je dostupnost fontova koji mogu u potpunosti iskoristiti font-varianti font-variant-numericograničena. Sve je veći broj fontova kompatibilnih s OpenTypeom, ali postoji mnogo manja podskupina opcija koje koriste sve značajke koje font-variant-numericnude, a one su često premium i skupe. Richard Butler to lijepo sažima:
Na raspolaganju su nam brojevi „velikih slova“ koji se nazivaju brojevi koji označavaju obloge ili naslove, i brojevi „malih slova“ koji se nazivaju stari ili tekstualni brojevi. ... Također je slučaj da velika većina fontova nije niti moderna niti profesionalna, ako moderni znači OpenType- omogućena i profesionalna sredstva dizajnirana s oba skupa brojeva.
Najveći problem kojim se obično bavimo kada su CSS svojstva u pitanju je podrška za preglednik, ali ovo svojstvo i sva ostala povezana s font-variantnjima također su na milost i nemilost dizajnera fontova kako bi pružili potpunu podršku stolu.
To je gadno, ali počinjemo viđati više „modernih“ i „profesionalnih“ fontova, čak i u vrijeme pisanja ovog teksta. Adobe TypeKit najavio je da radi na podršci OpenType značajki, a šuškalo se i da je na raspolaganju i Google Fonts sada kada ih Chrome 62 podržava.
Osnovna upotreba
Ovo je najosnovnije korištenje imovine:
.fraction ( font-variant-numeric: diagonal-fractions; )Stariji preglednici to neće prepoznati, ali prihvaćaju font-feature-settingskoji otključavaju iste značajke s različitim vrijednostima. Dva svojstva možemo upariti za dublju podršku:
.fraction ( font-feature-settings: frac; font-variant-numeric: diagonal-fractions; )Ili ovo možemo prilagoditi tako da njuškamo podršku preglednika @supportstako da se novo svojstvo poslužuje samo za podršku preglednicima:
.fraction ( font-feature-settings: frac; ) @supports (font-variant-numeric: diagonal-fractions) ( .fraction ( font-feature-settings: frac; font-variant-numeric: diagonal-fractions; ) )Vrijednosti
font-variant-numericNekretnine prihvaća sljedeće vrijednosti. Odgovarajuća font-feature-settingsvrijednost navedena je za referencu.
Opće vrijednosti
| Vrijednost | Opis | Postavka značajke |
|---|---|---|
normal | Nijedna od dolje navedenih značajki nije omogućena. | N / A |
ordinal | Primjenjuje slova koja predstavljaju numerički redoslijed, obično u obliku natpisa. | ordn |
slashed-zero | Prikazuje zamjenski oblik nule s dijagonalnom crtom koja prolazi kroz njega. | zero |
Numeričke vrijednosti slika
| Vrijednost | Opis | Postavka značajke |
|---|---|---|
lining-nums | Linije se okomito broje prema gore, tako da se pridržavaju iste visine, poravnavaju se na istoj ravnini. | lnum |
oldstyle-nums | Omogućuje alternativno okomito poravnanje gdje brojevi nisu uvijek ravnomjerno prikazani na istoj osnovnoj liniji. | onum |
Numeričke vrijednosti razlomka
| Vrijednost | Opis | Postavka značajke |
|---|---|---|
diagonal-fractions | Prikazuje razlomke u manjem formatu gdje su brojnik (gornji broj) i nazivnik (donji broj) podijeljeni dijagonalnom kosom crtom. | frac |
stacked-fractions | Prikazuje razlomke u manjem formatu gdje su brojnik i nazivnik složeni jedan na drugi i podijeljeni vodoravnom crtom. | afrc |
Numeričke vrijednosti razmaka
| Vrijednost | Opis | Postavka značajke |
|---|---|---|
proportional-nums | Omogućuje brojevima da zauzimaju vlastitu količinu prostora koji u širini nije nužno jednak ostalim brojevima. | pnum |
tabular-nums | Prikazuje brojeve s jednakim veličinama, proporcionalnim i razmakom za čisto oblikovanje u kontekstu tabličnih podataka. | tnum |
Specifikacija uključuje posebnu napomenu o upotrebi ordinaljer podsjeća na nadređeni supelement, ali je drugačije označena.
Za natpise:
sup ( font-variant-position: super; )Two squared is 22Za redne oznake:
.ordinal ( font-variant-numeric: ordinal; )1stPodrška preglednika
font-variant-numericImovina je trenutno dio CSS Fontovi modul Level 3 specifikaciji, koja je u statusu kandidata za preporuku u vrijeme pisanja ovog teksta, što znači da može promijeniti u bilo kojem trenutku.
Radna površina
| Krom | Rub | Firefox | IE | Opera | Safari |
|---|---|---|---|---|---|
| 52 | Ne | 34 | Ne | 39 | 9.1 |
Firefox 24-34 (ekskluzivno) podržava svojstvo iza layout.css.font-features.enabledpreferencije kada je postavljeno na true.
Mobilni
| Android preglednik | Chrome Android | Rub | Firefox | IE | Opera Android | iOS Safari |
|---|---|---|---|---|---|---|
| 52 | 52 | Ne | 34 | Ne | 39 | Da |