Den font-variant-numericegenskab i CSS understøtter OpenType font format ved at angive, hvilke numeriske glyffer til brug på en klasse, herunder varianter for fraktioner, ordenstal markører og stylet variationer blandt andre.
En lille kontekst
Vi har tendens til at tænke på tal som en statisk tegn. Det udskrives, og sådan er det. Imidlertid er tal meget mere som alfabetbogstaver i den forstand, at de kan have varianter, der afhængigt af sammenhængen gør det værd at ændre stilen. Vi taler om ting som brøker (f.eks. 1/4), ordinaler (f.eks. 1.) og endda ækvivalenter med store og små tal. Men i modsætning til bogstaver ændrer disse variationer ikke betydningen af indholdet, selvom de giver yderligere kontekst eller har indflydelse på læsbarheden.
Gnidningen med denne egenskab er, at den er designet til at arbejde med OpenType-aktiverede skrifttyper, et nyt men hurtigt udviklende skrifttypeformat, der giver et mere omfattende sæt glyffer, der kan målrettes til at bruge i forskellige sammenhænge. Du kan ofte høre OpenType kaldet variable skrifttyper, og det er fordi de indeholder et større udvalg af tegn, der gør dem mere fleksible til en række forskellige anvendelser. Variationer for alle tingene!
Problemet er, at tilgængeligheden af skrifttyper, der er i stand til at drage fuld fordel af font-variantog font-variant-numericer begrænset. Der er et stigende antal OpenType-kompatible skrifttyper, men der er en meget mindre delmængde af muligheder, der bruger alle de funktioner, der font-variant-numerictilbydes, og de er ofte premium og dyre. Richard Butler opsummerer dette pænt:
Vi har til rådighed 'store bogstaver' kaldet for- eller titlenumre og 'små bogstaver' kaldet gammeldags eller teksttal ... Det er også sådan, at langt de fleste skrifttyper hverken er moderne eller professionelle, hvis moderne betyder OpenType aktiverede og professionelle midler designet med begge sæt tal.
Det største problem, vi typisk er bekymret for, når det kommer til CSS-egenskaber, er browsersupport, men denne ejendom og alle andre relaterede font-varianter også underlagt fontdesignere, der giver fuld støtte til bordet.
Det er en bummer, men vi begynder at se mere "moderne" og "professionelle" skrifttyper dukke op, selv på tidspunktet for denne skrivning. Adobe TypeKit annoncerede, at det er arbejde med at understøtte OpenType-funktioner, og det er blevet rygter om, at Google Fonts også er ombord nu, da Chrome 62 understøtter dem.
Grundlæggende brug
Dette er den mest basale brug af ejendommen:
.fraction ( font-variant-numeric: diagonal-fractions; )Ældre browsere kan ikke genkende det, men de accepterer, font-feature-settingssom låser de samme funktioner op med forskellige værdier. Vi kan parre de to egenskaber for dybere support:
.fraction ( font-feature-settings: frac; font-variant-numeric: diagonal-fractions; )Eller vi kan skræddersy dette til at snuse browsersupport ved hjælp af, @supportsså den nye ejendom kun serveres til understøttende browsere:
.fraction ( font-feature-settings: frac; ) @supports (font-variant-numeric: diagonal-fractions) ( .fraction ( font-feature-settings: frac; font-variant-numeric: diagonal-fractions; ) )Værdier
Den font-variant-numericejendom accepterer følgende værdier. Den tilsvarende font-feature-settingsværdi er angivet som reference.
Generelle værdier
| Værdi | Beskrivelse | Funktionsindstilling |
|---|---|---|
normal | Ingen af nedenstående funktioner er aktiveret. | Ikke relevant |
ordinal | Anvender bogstaver for at repræsentere numerisk rækkefølge, typisk i form af et overskrift. | ordn |
slashed-zero | Viser en alternativ form for nul med en diagonal linje, der løber gennem den. | zero |
Numeriske figurværdier
| Værdi | Beskrivelse | Funktionsindstilling |
|---|---|---|
lining-nums | Linjeantal op med lodret, så de holder sig til samme højde, er justeret på samme plan. | lnum |
oldstyle-nums | Tillader en alternativ lodret justering, hvor tal ikke altid vises jævnt på samme basislinje. | onum |
Numeriske brøkværdier
| Værdi | Beskrivelse | Funktionsindstilling |
|---|---|---|
diagonal-fractions | Viser brøker i et mindre format, hvor tælleren (øverste tal) og nævneren (nederste tal) divideres med en diagonal skråstreg. | frac |
stacked-fractions | Viser brøker i et mindre format, hvor tælleren og nævneren er stablet oven på hinanden og divideret med en vandret linje. | afrc |
Numeriske afstandsværdier
| Værdi | Beskrivelse | Funktionsindstilling |
|---|---|---|
proportional-nums | Gør det muligt for tal at optage deres egen plads, som ikke nødvendigvis har samme bredde som andre tal. | pnum |
tabular-nums | Viser tal med lige store størrelser, proportionale og mellemrum for ren formatering i tabelkontekster. | tnum |
Specifikationen indeholder en speciel note om brugen af, ordinalfordi den ligner superscript- supelementet, men er markeret anderledes.
For overskrifter:
sup ( font-variant-position: super; )Two squared is 22For ordinære markører:
.ordinal ( font-variant-numeric: ordinal; )1stBrowsersupport
Den font-variant-numericegenskab er i øjeblikket en del af CSS skrifttyper Modul niveau 3 specifikation, som er i Candidate Anbefaling status på tidspunktet for dette skrives, hvilke midler det kan ændre på ethvert tidspunkt.
Desktop
| Chrome | Edge | Firefox | IE | Opera | Safari |
|---|---|---|---|---|---|
| 52 | Ingen | 34 | Ingen | 39 | 9.1 |
Firefox 24-34 (eksklusiv) understøtter ejendommen bag layout.css.font-features.enabledpræferencen, når den er indstillet til true.
Mobil
| Android-browser | Chrome Android | Edge | Firefox | IE | Opera Android | iOS Safari |
|---|---|---|---|---|---|---|
| 52 | 52 | Ingen | 34 | Ingen | 39 | Ja |