font-variant-numericProprietatea în CSS acceptă formatul de font OpenType prin specificarea glifurile numerice pentru a utiliza pe o clasă, incluzând variante de fracțiuni, markeri ordinale și variații în stil printre altele.
Un mic context
Tindem să ne gândim la numere ca la un glif static. Tipărește și așa este. Cu toate acestea, numerele seamănă mult mai mult cu literele alfabetului în sensul că pot avea variante care, în funcție de context, fac să merite modificarea stilului. Vorbim despre lucruri precum fracții (de exemplu 1/4), ordinale (de ex. Prima) și chiar echivalentul numerelor mari și mici. Cu toate acestea, spre deosebire de litere, aceste variații nu modifică sensul conținutului, deși oferă un context suplimentar sau au un impact asupra lizibilității.
Frecțiunea cu această proprietate este că a fost concepută pentru a funcționa cu fonturi activate OpenType, un format de font nou, dar în dezvoltare rapidă, care oferă un set mai extins de glifuri care pot fi vizate pentru a fi utilizate în diferite contexte. Este posibil să auziți des OpenType denumit fonturi variabile și asta pentru că acestea conțin o varietate mai mare de caractere care le fac mai flexibile pentru o varietate de utilizări. Variații pentru toate lucrurile!
Problema este că disponibilitatea fonturilor care pot profita din plin font-variantși font-variant-numericeste limitată. Există un număr tot mai mare de fonturi compatibile cu OpenType, dar există un subset mult mai mic de opțiuni care utilizează toate caracteristicile font-variant-numericoferite și cele care sunt adesea premium și costisitoare. Richard Butler rezumă frumos acest lucru:
Avem la dispoziție numere „majuscule” numite numere de linie sau titlare și numere „minuscule” numite numere de stil vechi sau text.… Este, de asemenea, cazul în care marea majoritate a fonturilor nu sunt nici moderne, nici profesionale, dacă modern înseamnă OpenType- activate și profesionale înseamnă concepute cu ambele seturi de cifre.
Cea mai mare problemă cu care ne preocupăm în mod obișnuit atunci când vine vorba de proprietățile CSS este suportul browserului, dar această proprietate și toate celelalte legate de acestea font-variantsunt, de asemenea, la îndemâna proiectanților de fonturi pentru a aduce un sprijin complet la masă.
Este o prostie, dar începem să vedem fonturi mai „moderne” și „profesionale”, chiar și în momentul scrierii acestui articol. Adobe TypeKit a anunțat că lucrează pentru a sprijini caracteristicile OpenType și s-a zvonit că Google Fonts este la bord și acum, când Chrome 62 le acceptă.
Utilizare de bază
Aceasta este cea mai simplă utilizare a proprietății:
.fraction ( font-variant-numeric: diagonal-fractions; )Browserele mai vechi nu vor recunoaște acest lucru, dar acceptă font-feature-settingscare deblochează aceleași caracteristici cu valori diferite. Putem asocia cele două proprietăți pentru un sprijin mai profund:
.fraction ( font-feature-settings: frac; font-variant-numeric: diagonal-fractions; )Sau, putem adapta acest lucru pentru a detecta suportul browserului folosind @supportsastfel încât noua proprietate să fie servită doar browserelor de asistență:
.fraction ( font-feature-settings: frac; ) @supports (font-variant-numeric: diagonal-fractions) ( .fraction ( font-feature-settings: frac; font-variant-numeric: diagonal-fractions; ) )Valori
font-variant-numericProprietatea acceptă următoarele valori. Valoarea corespunzătoare font-feature-settingseste notată pentru referință.
Valori generale
| Valoare | Descriere | Setarea caracteristicii |
|---|---|---|
normal | Niciuna dintre caracteristicile enumerate mai jos nu este activată. | N / A |
ordinal | Aplică litere pentru a reprezenta ordinea numerică, de obicei sub forma unui superindice. | ordn |
slashed-zero | Afișează o formă alternativă de zero cu o linie diagonală care trece prin ea. | zero |
Valori ale cifrelor numerice
| Valoare | Descriere | Setarea caracteristicii |
|---|---|---|
lining-nums | Numerele de linii în sus cu vertical, astfel încât să adere la aceeași înălțime, sunt aliniate pe același plan. | lnum |
oldstyle-nums | Permite o aliniere verticală alternativă în care numerele nu sunt întotdeauna afișate uniform pe aceeași linie de bază. | onum |
Valori ale fracțiunilor numerice
| Valoare | Descriere | Setarea caracteristicii |
|---|---|---|
diagonal-fractions | Afișează fracțiile într-un format mai mic în care numărătorul (numărul de sus) și numitorul (numărul de jos) sunt împărțite printr-o bară diagonală. | frac |
stacked-fractions | Afișează fracțiile într-un format mai mic în care numărătorul și numitorul sunt stivuite una peste alta și împărțite printr-o linie orizontală. | afrc |
Valorile spațierii numerice
| Valoare | Descriere | Setarea caracteristicii |
|---|---|---|
proportional-nums | Permite numerelor să ocupe propriul spațiu care nu este neapărat egal în lățime cu alte cifre. | pnum |
tabular-nums | Afișează numere cu dimensiuni egale, proporționale și spațiate pentru formatare curată în contexte de date tabulare. | tnum |
Specificația include o notă specială cu privire la utilizarea, ordinaldeoarece seamănă cu supelementul supercript , dar este marcată diferit.
Pentru superscripturi:
sup ( font-variant-position: super; )Two squared is 22Pentru markeri ordinali:
.ordinal ( font-variant-numeric: ordinal; )1stSuport pentru browser
font-variant-numericProprietatea este în prezent o parte din 3 caietul de sarcini CSS fonturi Modulul Level, care este în starea Recomandarea candidatului la momentul scrierii, ceea ce înseamnă că se poate schimba în orice moment.
Desktop
| Crom | Margine | Firefox | IE | Operă | Safari |
|---|---|---|---|---|---|
| 52 | Nu | 34 | Nu | 39 | 9.1 |
Firefox 24-34 (exclusiv) acceptă proprietatea din spatele layout.css.font-features.enabledpreferinței atunci când este setată la true.
Mobil
| Browser Android | Chrome Android | Margine | Firefox | IE | Opera Android | Safari iOS |
|---|---|---|---|---|---|---|
| 52 | 52 | Nu | 34 | Nu | 39 | da |