Font-variant-numeric - Trucchi CSS

Anonim

La font-variant-numericproprietà 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-varianted 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-numericoffrono 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-variantsono 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-settingsquali 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 @supportsmodo 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-numericproprietà accetta i seguenti valori. Il font-feature-settingsvalore 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 ordinalperché assomiglia supall'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-numericproprietà 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.enabledpreferenza quando è impostata su true.

Mobile

Browser Android Chrome Android Bordo Firefox IE Opera Android iOS Safari
52 52 No 34 No 39