La font-variant-numeric
proprietà in CSS supporta il formato del carattere OpenType specificando quali glifi numerici utilizzare su una classe, comprese le variazioni per le frazioni, i marcatori ordinali e le variazioni di stile tra gli altri.
Un po 'di contesto
Tendiamo a pensare ai numeri come a un glifo statico. Stampa ed è così. Tuttavia, i numeri sono molto più simili alle lettere dell'alfabeto, nel senso che possono avere varianti che, a seconda del contesto, fanno valere la pena modificare lo stile. Stiamo parlando di cose come frazioni (es. 1/4), ordinali (es. 1st) e persino l'equivalente di numeri maiuscoli e minuscoli. Tuttavia, a differenza delle lettere, queste variazioni non cambiano il significato del contenuto, sebbene diano ulteriore contesto o abbiano un impatto sulla leggibilità.
Il problema di questa proprietà è che è stata progettata per funzionare con i caratteri abilitati per OpenType, un formato di carattere nuovo ma in rapido sviluppo che fornisce una serie più ampia di glifi che possono essere utilizzati in contesti diversi. Potresti spesso sentire OpenType indicato come caratteri variabili e questo perché contengono una maggiore varietà di caratteri che li rendono più flessibili per una varietà di usi. Variazioni per tutte le cose!
Il problema è che la disponibilità di caratteri in grado di sfruttare appieno font-variant
ed font-variant-numeric
è limitata. C'è un numero crescente di caratteri compatibili con OpenType, ma c'è un sottoinsieme molto più piccolo di opzioni che fanno uso di tutte le funzionalità che font-variant-numeric
offrono e quelle sono spesso premium e costose. Richard Butler lo riassume bene:
Abbiamo a nostra disposizione numeri "maiuscoli" chiamati numeri di rivestimento o di titolazione e numeri "minuscoli" chiamati numeri vecchio stile o di testo ... È anche vero che la stragrande maggioranza dei caratteri non sono né moderni né professionali, se moderno significa OpenType- mezzi abilitati e professionali progettati con entrambe le serie di numeri.
Il problema più grande di cui siamo tipicamente interessati quando si tratta di proprietà CSS è il supporto del browser, ma questa proprietà e tutte le altre relative font-variant
sono anche alla mercé dei progettisti di font per portare il pieno supporto alla tabella.
È un peccato, ma stiamo iniziando a vedere i caratteri più "moderni" e "professionali" che compaiono, anche al momento della stesura di questo articolo. Adobe TypeKit ha annunciato che sta lavorando per supportare le funzionalità OpenType e si dice che anche Google Fonts sia a bordo ora che Chrome 62 le supporta.
Utilizzo di base
Questo è l'utilizzo più basilare della proprietà:
.fraction ( font-variant-numeric: diagonal-fractions; )
I browser più vecchi non lo riconosceranno, ma accettano font-feature-settings
quali sbloccano le stesse funzionalità con valori diversi. Possiamo accoppiare le due proprietà per un supporto più profondo:
.fraction ( font-feature-settings: frac; font-variant-numeric: diagonal-fractions; )
Oppure, possiamo adattarlo per fiutare il supporto del browser utilizzando in @supports
modo che la nuova proprietà venga servita solo ai browser di supporto:
.fraction ( font-feature-settings: frac; ) @supports (font-variant-numeric: diagonal-fractions) ( .fraction ( font-feature-settings: frac; font-variant-numeric: diagonal-fractions; ) )
Valori
La font-variant-numeric
proprietà accetta i seguenti valori. Il font-feature-settings
valore corrispondente è annotato per riferimento.
Valori generali


Valore | Descrizione | Impostazione delle funzioni |
---|---|---|
normal | Nessuna delle funzionalità elencate di seguito è abilitata. | N / A |
ordinal | Applica le lettere per rappresentare l'ordine numerico, in genere sotto forma di apice. | ordn |
slashed-zero | Visualizza una forma alternativa di zero con una linea diagonale che la attraversa. | zero |
Valori delle cifre numeriche


Valore | Descrizione | Impostazione delle funzioni |
---|---|---|
lining-nums | I numeri delle linee in verticale in modo che aderiscano alla stessa altezza sono allineati sullo stesso piano. | lnum |
oldstyle-nums | Consente un allineamento verticale alternativo in cui i numeri non sono sempre visualizzati in modo uniforme sulla stessa linea di base. | onum |
Valori delle frazioni numeriche


Valore | Descrizione | Impostazione delle funzioni |
---|---|---|
diagonal-fractions | Visualizza le frazioni in un formato più piccolo in cui il numeratore (numero superiore) e il denominatore (numero inferiore) sono divisi da una barra diagonale. | frac |
stacked-fractions | Visualizza le frazioni in un formato più piccolo in cui il numeratore e il denominatore sono sovrapposti e divisi da una linea orizzontale. | afrc |
Valori di spaziatura numerici
Valore | Descrizione | Impostazione delle funzioni |
---|---|---|
proportional-nums | Consente ai numeri di occupare la propria quantità di spazio che non è necessariamente uguale in larghezza ad altri numeri. | pnum |
tabular-nums | Visualizza i numeri con dimensioni, proporzioni e spaziatura uguali per una formattazione pulita in contesti di dati tabulari. | tnum |
La specifica include una nota speciale sull'uso di ordinal
perché assomiglia sup
all'elemento apice ma è contrassegnata in modo diverso.
Per apici:
sup ( font-variant-position: super; )
Two squared is 22
Per i marcatori ordinali:
.ordinal ( font-variant-numeric: ordinal; )
1st
Supporto browser
La font-variant-numeric
proprietà fa attualmente parte della specifica CSS Fonts Module Level 3, che al momento della stesura di questo documento si trova nello stato Candidate Recommendation, il che significa che può cambiare in qualsiasi momento.
Desktop
Cromo | Bordo | Firefox | IE | musica lirica | Safari |
---|---|---|---|---|---|
52 | No | 34 | No | 39 | 9.1 |
Firefox 24-34 (esclusivo) supporta la proprietà dietro la layout.css.font-features.enabled
preferenza quando è impostata su true
.
Mobile
Browser Android | Chrome Android | Bordo | Firefox | IE | Opera Android | iOS Safari |
---|---|---|---|---|---|---|
52 | 52 | No | 34 | No | 39 | sì |