`font-variant-numeric (tabular-nums)` în CSS

Alege forma cifrelor: lățime egală pentru tabele și prețuri, cifre de text, zero tăiat sau fracții reale.

Sintaxă CSS

font-variant-numeric: tabular-nums;     /* cifre de lățime egală */
font-variant-numeric: oldstyle-nums;
font-variant-numeric: slashed-zero;
font-variant-numeric: diagonal-fractions;
font-variant-numeric: tabular-nums slashed-zero;

Ce face `font-variant-numeric (tabular-nums)`

Multe fonturi au cifre proporționale: „1” este mai îngust decât „8”. În tabele, prețurile și cronometrele nu mai sunt aliniate pe coloane, iar un număr care se schimbă „tremură” pe ecran. tabular-nums dă tuturor cifrelor aceeași lățime.

Proprietatea activează funcții OpenType ale fontului. Dacă fontul nu are varianta cerută (de exemplu cifre tabelare sau fracții), textul arată neschimbat. Fonturile de sistem moderne și multe fonturi web (Inter, Roboto) au tabular-nums.

Valori uzuale

Valoare	Descriere
`normal`	Cifrele implicite ale fontului.
`tabular-nums / proportional-nums`	Cifre de lățime egală / lățime naturală.
`lining-nums / oldstyle-nums`	Cifre de înălțimea majusculelor / cifre „de text”, cu urcări și coborâri.
`diagonal-fractions / stacked-fractions`	1/2 desenat ca fracție cu bară oblică / cu bară orizontală.
`slashed-zero`	Zero tăiat, ușor de deosebit de litera O.
`ordinal`	Forme ordinale (sufix ridicat), dacă fontul le are.

Exemple

Exemplul 1: Coloană de prețuri aliniată

Cu cifre tabelare și aliniere la dreapta, sumele se citesc ușor pe coloană.

.tabel-preturi td.pret {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

Efect vizual în browser

Valorile 1 111,00 lei, 89,90 lei și 7 488,50 lei sunt aliniate perfect: virgulele și cifrele unităților stau una sub alta.

Exemplul 2: Cod de reducere fără confuzie între 0 și O

Zero tăiat ajută la codurile pe care utilizatorul le copiază de mână.

.cod-reducere {
  font-family: ui-monospace, monospace;
  font-variant-numeric: slashed-zero;
  letter-spacing: 0.1em;
}