font-variant-numericĪpašums CSS atbalsta OpenType fontu formātu, norādot, kas ciparu glifi izmantot uz klasi, tostarp variantu frakcijas kārtas marķieriem un iekārtotos variācijas starp citiem.
Mazs konteksts
Mēs mēdzam domāt par skaitļiem kā par statisku glifu. Tas izdrukā un tā tas ir. Tomēr cipari ir daudz vairāk līdzīgi alfabēta burtiem tādā ziņā, ka tiem var būt varianti, kas, atkarībā no konteksta, liek modificēt stilu. Mēs runājam par tādām lietām kā frakcijas (piemēram, 1/4), parastie (piemēram, 1.) un pat lielo un mazo ciparu ekvivalenti. Tomēr atšķirībā no burtiem šīs variācijas nemaina satura nozīmi, lai gan tās piešķir papildu kontekstu vai ietekmē lasāmību.
Berzēt ar šo īpašumu ir tas, ka tas tika izstrādāts darbam ar OpenType iespējotiem fontiem - jaunu, bet ātri attīstāmu fontu formātu, kas nodrošina plašāku glifu kopu, kuru var atlasīt izmantošanai dažādos kontekstos. Jūs bieži dzirdat OpenType, kas tiek dēvēts par mainīgiem fontiem, un tāpēc, ka tie satur lielāku rakstzīmju klāstu, kas padara tos elastīgākus dažādiem lietojumiem. Variācijas visām lietām!
Jautājums ir tāds, ka tādu fontu pieejamība, kas spēj pilnībā izmantot priekšrocības font-variantun font-variant-numericir ierobežota. Ir arvien vairāk ar OpenType saderīgu fontu, taču ir daudz mazāka opciju apakškopa, kas izmanto visas piedāvātās funkcijas, font-variant-numericun tās bieži ir augstākās klases un dārgas. Ričards Batlers to lieliski apkopo:
Mūsu rīcībā ir “lielie” cipari, kurus sauc par cipariem vai nosaukuma cipariem, un “mazie” cipari, kurus sauc par vecā stila vai teksta cipariem. iespējoti un profesionāli līdzekļi, kas izstrādāti ar abiem ciparu komplektiem.
Lielākais jautājums, ar kuru mēs parasti rūpējamies, runājot par CSS īpašumiem, ir pārlūka atbalsts, taču šis īpašums un visi pārējie saistītie font-variantir arī fontu dizaineru žēlastībā, lai galdā sniegtu pilnīgu atbalstu.
Tas ir bummer, bet mēs sākam redzēt, ka parādās pat mūsdienīgāki un profesionālāki fonti pat šīs rakstīšanas laikā. Adobe TypeKit paziņoja, ka tas ir darbs, lai atbalstītu OpenType funkcijas, un ir baumas, ka Google Fonts ir pieejams arī tagad, kad pārlūks Chrome 62 tos atbalsta.
Pamata lietošana
Šis ir pamata īpašuma izmantojums:
.fraction ( font-variant-numeric: diagonal-fractions; )Vecākas pārlūkprogrammas to neatpazīs, taču tās pieņem, font-feature-settingskuras atbloķē tās pašas funkcijas ar atšķirīgām vērtībām. Lai iegūtu dziļāku atbalstu, mēs varam savienot divas īpašības:
.fraction ( font-feature-settings: frac; font-variant-numeric: diagonal-fractions; )Vai arī mēs to varam pielāgot, lai izspiestu pārlūkprogrammas atbalstu, @supportslai jaunais īpašums tiktu rādīts tikai atbalstošām pārlūkprogrammām:
.fraction ( font-feature-settings: frac; ) @supports (font-variant-numeric: diagonal-fractions) ( .fraction ( font-feature-settings: frac; font-variant-numeric: diagonal-fractions; ) )Vērtības
font-variant-numericĪpašums pieņem šādas vērtības. Atbilstošā font-feature-settingsvērtība ir norādīta atsaucei.
Vispārīgās vērtības
| Vērtība | Apraksts | Funkcijas iestatīšana |
|---|---|---|
normal | Neviena no tālāk uzskaitītajām funkcijām nav iespējota. | N / A |
ordinal | Lieto burtus, lai attēlotu ciparu secību, parasti augšraksta formā. | ordn |
slashed-zero | Parāda alternatīvu nulles formu ar diagonālo līniju, kas iet caur to. | zero |
Ciparu skaitļu vērtības
| Vērtība | Apraksts | Funkcijas iestatīšana |
|---|---|---|
lining-nums | Līnijas, kas atrodas uz augšu ar vertikāli, lai tās piestiprinātos vienā augstumā, ir izlīdzinātas vienā plaknē. | lnum |
oldstyle-nums | Ļauj alternatīvu vertikālu izlīdzināšanu, kur skaitļi ne vienmēr vienmērīgi tiek rādīti vienā un tajā pašā bāzes līnijā. | onum |
Skaitliskās frakciju vērtības
| Vērtība | Apraksts | Funkcijas iestatīšana |
|---|---|---|
diagonal-fractions | Parāda frakcijas mazākā formātā, kur skaitītājs (augšējais skaitlis) un saucējs (apakšējais skaitlis) dalīts ar diagonālo slīpsvītru. | frac |
stacked-fractions | Parāda frakcijas mazākā formātā, kur skaitītājs un saucējs ir sakrauti viens uz otra un dalīti ar horizontālu līniju. | afrc |
Skaitliskās atstarpju vērtības
| Vērtība | Apraksts | Funkcijas iestatīšana |
|---|---|---|
proportional-nums | Ļauj skaitļiem aizņemt savu vietu, kas pēc platuma ne vienmēr ir vienāda ar citiem cipariem. | pnum |
tabular-nums | Parāda numurus ar vienādu lielumu, proporcionālu un atstarpi, lai formatētu tabulas veidā. | tnum |
Specifikācijā ir iekļauta īpaša piezīme par lietošanu, ordinaljo tas atgādina virsraksta supelementu, bet ir atšķirīgi atzīmēts.
Virsrakstiem:
sup ( font-variant-position: super; )Two squared is 22Kārtas marķieriem:
.ordinal ( font-variant-numeric: ordinal; )1stPārlūka atbalsts
Pašlaik font-variant-numericīpašums ir daļa no CSS fontu moduļa 3. līmeņa specifikācijas, kas šī rakstīšanas laikā ir kandidāta ieteikuma statusā, kas nozīmē, ka to var mainīt jebkurā brīdī.
Darbvirsma
| Chrome | Mala | Firefox | IE | Opera | Safari |
|---|---|---|---|---|---|
| 52 | Nē | 34 | Nē | 39 | 9.1 |
Firefox 24-34 (ekskluzīvs) atbalsta rekvizītu aiz īpašuma, layout.css.font-features.enabledkad tas ir iestatīts uz true.
Mobilais
| Android pārlūks | Chrome Android | Mala | Firefox | IE | Opera Android | iOS Safari |
|---|---|---|---|---|---|---|
| 52 | 52 | Nē | 34 | Nē | 39 | Jā |