Den font-variant-numericegenskap i CSS støtter Openskriftformat ved å spesifisere hvilken numeriske tegnvariantene til bruk på en klasse, inkludert varianter for fraksjoner, ordnings markører og utformede variasjoner blant andre.
Litt kontekst
Vi pleier å tenke på tall som et statisk tegn. Det skrives ut og slik er det. Imidlertid er tall mye mer som alfabetbokstaver i den forstand at de kan ha varianter som, avhengig av konteksten, gjør det verdt å endre stilen. Vi snakker om ting som brøker (f.eks. 1/4), ordinaler (f.eks. Første) og til og med tilsvarende store og små bokstaver. Imidlertid, i motsetning til bokstaver, endrer ikke disse variasjonene innholdet, men de gir ekstra sammenheng eller har innvirkning på lesbarheten.
Gnisten med denne egenskapen er at den ble designet for å fungere med OpenType-aktiverte skrifter, et nytt, men raskt utviklende skriftformat som gir et mer omfattende sett med tegn som kan målrettes til bruk i forskjellige sammenhenger. Du kan ofte høre OpenType referert til som variable skrifter, og det er fordi de inneholder et større utvalg av tegn som gjør dem mer fleksible for en rekke bruksområder. Variasjoner for alle tingene!
Problemet er at tilgjengeligheten av skrifttyper som er i stand til å dra full nytte av font-variantog font-variant-numericer begrenset. Det er et økende antall OpenType-kompatible skrifttyper, men det er en mye mindre delmengde av alternativer som bruker alle funksjonene som font-variant-numerictilbys, og de er ofte premium og dyre. Richard Butler oppsummerer dette pent:
Vi har til rådighet 'store bokstaver' kalt tall eller titteltall, og 'små bokstaver' som kalles gammel stil eller teksttall ... Det er også slik at de aller fleste skriftene hverken er moderne eller profesjonelle, hvis moderne betyr OpenType- aktiverte og profesjonelle midler designet med begge sett med tall.
Det største problemet vi vanligvis er opptatt av når det gjelder CSS-egenskaper, er nettleserstøtte, men denne egenskapen og alle andre relatert til font-varianter også prisgitt fontdesignere for å gi full støtte til bordet.
Det er en bummer, men vi begynner å se mer "moderne" og "profesjonelle" skrifter dukker opp, selv når dette skrives. Adobe TypeKit kunngjorde at det er arbeid for å støtte OpenType-funksjoner, og det har blitt ryktet at Google Fonts også er ombord nå som Chrome 62 støtter dem.
Grunnleggende bruk
Dette er den mest grunnleggende bruken av eiendommen:
.fraction ( font-variant-numeric: diagonal-fractions; )Eldre nettlesere vil ikke gjenkjenne det, men de godtar font-feature-settingssom låser opp de samme funksjonene med forskjellige verdier. Vi kan sammenkoble de to egenskapene for dypere støtte:
.fraction ( font-feature-settings: frac; font-variant-numeric: diagonal-fractions; )Eller vi kan skreddersy dette for å snuse ut nettleserstøtte ved å bruke @supportsslik at den nye egenskapen kun serveres til støttende nettlesere:
.fraction ( font-feature-settings: frac; ) @supports (font-variant-numeric: diagonal-fractions) ( .fraction ( font-feature-settings: frac; font-variant-numeric: diagonal-fractions; ) )Verdier
Den font-variant-numericeiendommen aksepterer følgende verdier. Den tilsvarende font-feature-settingsverdien noteres for referanse.
Generelle verdier
| Verdi | Beskrivelse | Funksjonsinnstilling |
|---|---|---|
normal | Ingen av funksjonene som er oppført nedenfor er aktivert. | Ikke relevant |
ordinal | Bruker bokstaver for å representere numerisk rekkefølge, vanligvis i form av et overskrift. | ordn |
slashed-zero | Viser en alternativ form av null med en diagonal linje som går gjennom den. | zero |
Numeriske figurverdier
| Verdi | Beskrivelse | Funksjonsinnstilling |
|---|---|---|
lining-nums | Linjene tall opp med vertikalt slik at de holder seg til samme høyde er justert på samme plan. | lnum |
oldstyle-nums | Tillater en alternativ vertikal justering der tall ikke alltid vises jevnt på samme grunnlinje. | onum |
Numeriske brøkverdier
| Verdi | Beskrivelse | Funksjonsinnstilling |
|---|---|---|
diagonal-fractions | Viser brøker i mindre format der telleren (toppnummer) og nevner (bunnnummer) er delt med en diagonal skråstrek. | frac |
stacked-fractions | Viser brøker i mindre format der teller og nevner er stablet oppå hverandre og delt med en vannrett linje. | afrc |
Numeriske avstandsverdier
| Verdi | Beskrivelse | Funksjonsinnstilling |
|---|---|---|
proportional-nums | Lar tall ta opp sin egen mengde plass som ikke nødvendigvis er like bred i forhold til andre tall. | pnum |
tabular-nums | Viser tall med lik størrelse, proporsjonal og avstand for ren formatering i tabellkontekster. | tnum |
Spesifikasjonen inneholder en spesiell merknad om bruken av ordinalfordi den ligner på overskriftelementet sup, men er merket annerledes.
For overskrift:
sup ( font-variant-position: super; )Two squared is 22For ordinære markører:
.ordinal ( font-variant-numeric: ordinal; )1stNettleserstøtte
Den font-variant-numericEiendommen er i dag en del av CSS fonter Modul Nivå 3-spesifikasjonen, som er i Kandidat Anbefaling status på tidspunktet for dette skriftlig, noe som betyr at den kan endres når som helst.
Desktop
| Chrome | Kant | Firefox | DVS | Opera | Safari |
|---|---|---|---|---|---|
| 52 | Nei | 34 | Nei | 39 | 9.1 |
Firefox 24-34 (eksklusiv) støtter eiendommen bak layout.css.font-features.enabledpreferansen når den er satt til true.
Mobil
| Android-nettleser | Chrome Android | Kant | Firefox | DVS | Opera Android | iOS Safari |
|---|---|---|---|---|---|---|
| 52 | 52 | Nei | 34 | Nei | 39 | Ja |