Proprietà CSS font-variant-numeric
La proprietà CSS font-variant-numeric controlla l'uso di glifi alternativi per numeri, frazioni e indicatori ordinali.
La proprietà CSS font-variant-numeric controlla l'uso di glifi alternativi per numeri, frazioni e indicatori ordinali. È una parte della famiglia font-variant compatibile con la sintassi abbreviata, che espone le funzionalità numeriche OpenType senza ricorrere alla proprietà di basso livello font-feature-settings.
Questa pagina illustra cosa fa ciascun valore, quando utilizzarlo, i problemi legati al supporto dei font e un esempio eseguibile.
Perché usarla
I numeri possono essere resi in diversi stili: ordinali (es. 1st), frazioni (es. ½), cifre allineate o in stile antico, e spaziatura proporzionale o tabulare. A differenza delle lettere, queste varianti non cambiano il significato del testo, ma aggiungono contesto e influiscono sulla leggibilità:
- Le cifre tabulari rendono ogni cifra della stessa larghezza, così i numeri si allineano nelle tabelle e nelle colonne dei prezzi.
- Le cifre in stile antico hanno ascendenti e discendenti che si fondono nel testo continuo invece di risaltare come un'intestazione.
- Lo zero barrato disambigua
0dalla letteraOin codici, ID e numeri seriali. - Le frazioni diagonali trasformano
1/2in un unico glifo tipografico ½.
La limitazione principale è il supporto dei font: la funzionalità funziona solo se il carattere tipografico include effettivamente la tabella OpenType corrispondente. La maggior parte dei font di sistema supporta alcune funzionalità (allineate, tabulari), ma diagonal-fractions, stacked-fractions e slashed-zero sono presenti in molti meno caratteri. Quando a un font manca una funzionalità, il valore viene ignorato silenziosamente e vengono mostrati i glifi predefiniti.
| Valore iniziale | normal |
|---|---|
| Si applica a | Tutti gli elementi. Si applica anche a ::first-letter e ::first-line. |
| Ereditato | Sì. |
| Animabile | Discreto. |
| Versione | CSS3 |
| Sintassi DOM | object.style.fontVariantNumeric = "slashed-zero"; |
Sintassi
font-variant-numeric: normal | [ <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero ];I valori di figura, spaziatura, frazione, ordinale e zero barrato possono essere combinati in una singola dichiarazione perché controllano aspetti indipendenti dei glifi:
/* Tabular lining digits with a slashed zero */
font-variant-numeric: tabular-nums lining-nums slashed-zero;Esempio
Esempio della proprietà CSS font-variant-numeric con i valori oldstyle-nums e diagonal-fractions
<!DOCTYPE html>
<html>
<head>
<title>The title of the document </title>
<style>
.p1 {
font-variant-numeric: oldstyle-nums;
}
.p2 {
font-variant-numeric: diagonal-fractions;
}
</style>
</head>
<body>
<h2>Font-variant-numeric property example</h2>
<p class="p1">001528931</p>
<p class="p2">1/2</p>
</body>
</html>Risultato
Confronto di diverse funzionalità
Questo esempio imposta ogni funzionalità numerica su un proprio paragrafo in modo da poterle vedere affiancate (in un font che le supporta, come molti caratteri di Google Fonts).
<!DOCTYPE html>
<html>
<head>
<title>font-variant-numeric features</title>
<style>
.lining { font-variant-numeric: lining-nums; }
.oldstyle { font-variant-numeric: oldstyle-nums; }
.tabular { font-variant-numeric: tabular-nums; }
.diagonal { font-variant-numeric: diagonal-fractions; }
.slashed { font-variant-numeric: slashed-zero; }
</style>
</head>
<body>
<p class="lining">lining-nums: 0123456789</p>
<p class="oldstyle">oldstyle-nums: 0123456789</p>
<p class="tabular">tabular-nums: 1111 vs 8888</p>
<p class="diagonal">diagonal-fractions: 1/2 3/4</p>
<p class="slashed">slashed-zero: 1000 2030</p>
</body>
</html>Valori
| Valore | Descrizione |
|---|---|
| normal | I glifi alternativi non sono abilitati. |
<numeric-figure-values> | Controlla lo stile delle cifre. Parole chiave: lining-nums, oldstyle-nums. |
<numeric-spacing-values> | Controlla la larghezza della spaziatura. Parole chiave: proportional-nums, tabular-nums. |
<numeric-fraction-values> | Controlla lo stile delle frazioni. Parole chiave: diagonal-fractions, stacked-fractions. |
| ordinal | Sostituisce le cifre con glifi ordinali in apice (es. ¹ˢᵗ, ²ⁿᵈ) invece di aggiungere testo come "st" o "nd". Corrisponde a OpenType ordn. |
| slashed-zero | Forza uno zero con una barra. Corrisponde a OpenType zero. |
| initial | Imposta la proprietà al suo valore predefinito. |
| inherit | Eredita la proprietà dall'elemento padre. |
Proprietà correlate
font-variant-numeric è una delle varie proprietà estese della abbreviazione font-variant. Le altre si riferiscono a diverse categorie di glifi:
- font-variant-caps — maiuscoletto, maiuscoletto ridotto e glifi per titoli.
- font-variant-ligatures — legature comuni, discrezionali e contestuali.
È supportata da CSS3 in poi.