font-variant-numericNieruchomość w CSS obsługuje formatu OpenType czcionki, określając, które znaki numeryczne, aby wykorzystać w klasie, w tym odmian dla frakcji, porządkowych markerów i stylem wariacji między innymi.
Mały kontekst
Zwykle myślimy o liczbach jako o statycznym glifie. Drukuje i tak właśnie jest. Jednak liczby są bardziej podobne do liter alfabetu w tym sensie, że mogą mieć warianty, które w zależności od kontekstu sprawiają, że warto zmodyfikować styl. Mówimy o takich rzeczach, jak ułamki (np. 1/4), liczby porządkowe (np. Pierwsza), a nawet odpowiedniki wielkich i małych cyfr. Jednak w przeciwieństwie do liter, te odmiany nie zmieniają znaczenia treści, chociaż nadają dodatkowy kontekst lub wpływają na czytelność.
Tarcie z tą właściwością polega na tym, że została zaprojektowana do pracy z czcionkami obsługującymi OpenType, nowym, ale szybko rozwijającym się formatem czcionek, który zapewnia szerszy zestaw glifów, które mogą być przeznaczone do użycia w różnych kontekstach. Często można usłyszeć OpenType określane jako czcionki zmienne, a to dlatego, że zawierają one większą różnorodność znaków, dzięki czemu są bardziej elastyczne do różnych zastosowań. Wariacje na wszystkie rzeczy!
Problem polega na tym, że dostępność czcionek, które są w stanie w pełni wykorzystać font-varianti font-variant-numericjest ograniczona. Istnieje rosnąca liczba czcionek zgodnych z OpenType, ale istnieje znacznie mniejszy podzbiór opcji, które wykorzystują wszystkie oferowane funkcje, font-variant-numerica te często są premium i drogie. Richard Butler ładnie to podsumowuje:
Mamy do dyspozycji „wielkie” cyfry zwane cyframi podszewkowymi lub tytułowymi, oraz „małe” cyfry zwane cyframi w starym stylu lub tekstowymi.… Jest też tak, że zdecydowana większość czcionek nie jest ani nowoczesna, ani profesjonalna, jeśli nowoczesny oznacza OpenType włączone i profesjonalne środki zaprojektowane z obydwoma zestawami cyfr.
Największym problemem, z którym zwykle się martwimy, jeśli chodzi o właściwości CSS, jest obsługa przeglądarki, ale ta właściwość i wszystkie inne powiązane font-variantsą również na łasce projektantów czcionek, aby zapewnić pełne wsparcie dla tabeli.
To kłopot, ale zaczynamy widzieć bardziej „nowoczesne” i „profesjonalne” czcionki, nawet w momencie pisania tego tekstu. Adobe TypeKit ogłosił, że pracuje nad obsługą funkcji OpenType i mówi się, że Google Fonts jest również na pokładzie teraz, gdy Chrome 62 je obsługuje.
Podstawowe użycie
Oto najbardziej podstawowe zastosowanie nieruchomości:
.fraction ( font-variant-numeric: diagonal-fractions; )Starsze przeglądarki tego nie rozpoznają, ale akceptują font-feature-settingsodblokowanie tych samych funkcji z różnymi wartościami. Możemy sparować dwie właściwości, aby uzyskać głębsze wsparcie:
.fraction ( font-feature-settings: frac; font-variant-numeric: diagonal-fractions; )Lub możemy dostosować to, aby wykryć obsługę przeglądarek, używając @supportstak, aby nowa usługa była obsługiwana tylko dla przeglądarek obsługujących:
.fraction ( font-feature-settings: frac; ) @supports (font-variant-numeric: diagonal-fractions) ( .fraction ( font-feature-settings: frac; font-variant-numeric: diagonal-fractions; ) )Wartości
font-variant-numericWłaściwość przyjmuje następujące wartości. Odpowiednia font-feature-settingswartość jest podawana w celach informacyjnych.
Ogólne wartości
| Wartość | Opis | Ustawienie funkcji |
|---|---|---|
normal | Żadna z wymienionych poniżej funkcji nie jest włączona. | Nie dotyczy |
ordinal | Stosuje litery, które reprezentują porządek numeryczny, zazwyczaj w formie indeksu górnego. | ordn |
slashed-zero | Wyświetla alternatywną postać zera z przechodzącą przez nią ukośną linią. | zero |
Wartości liczbowe
| Wartość | Opis | Ustawienie funkcji |
|---|---|---|
lining-nums | Linie są numerowane pionowo za pomocą, aby przylegały do tej samej wysokości, są wyrównane na tej samej płaszczyźnie. | lnum |
oldstyle-nums | Umożliwia alternatywne wyrównanie w pionie, w którym liczby nie zawsze są równomiernie wyświetlane na tej samej linii bazowej. | onum |
Liczbowe wartości ułamkowe
| Wartość | Opis | Ustawienie funkcji |
|---|---|---|
diagonal-fractions | Wyświetla ułamki w mniejszym formacie, gdzie licznik (górna liczba) i mianownik (dolna liczba) są podzielone ukośną kreską. | frac |
stacked-fractions | Wyświetla ułamki w mniejszym formacie, w którym licznik i mianownik są ułożone jeden na drugim i podzielone poziomą linią. | afrc |
Numeryczne wartości odstępów
| Wartość | Opis | Ustawienie funkcji |
|---|---|---|
proportional-nums | Pozwala liczbom zajmować własną przestrzeń, która niekoniecznie jest równa szerokości do innych cyfr. | pnum |
tabular-nums | Wyświetla liczby o jednakowej wielkości, proporcjonalności i odstępach, aby zapewnić czyste formatowanie w tabelarycznych kontekstach danych. | tnum |
Specyfikacja zawiera specjalną uwagę dotyczącą użycia, ordinalponieważ przypomina supelement indeksu górnego , ale jest inaczej oznaczona.
W przypadku indeksów górnych:
sup ( font-variant-position: super; )Two squared is 22Dla znaczników porządkowych:
.ordinal ( font-variant-numeric: ordinal; )1stWsparcie przeglądarki
font-variant-numericNieruchomość jest obecnie częścią CSS Level 3 Czcionki Moduł specyfikacji, która jest w stanie Rekomendacji kandydackiej w chwili pisania tego tekstu, co oznacza, że może się zmienić w każdej chwili.
Pulpit
| Chrom | Brzeg | Firefox | TO ZNACZY | Opera | Safari |
|---|---|---|---|---|---|
| 52 | Nie | 34 | Nie | 39 | 9.1 |
Firefox 24-34 (wyłącznie) obsługuje właściwość za layout.css.font-features.enabledpreferencją, gdy jest ustawiona na true.
mobilny
| Przeglądarka Android | Chrome na Androida | Brzeg | Firefox | TO ZNACZY | Opera na Androida | iOS Safari |
|---|---|---|---|---|---|---|
| 52 | 52 | Nie | 34 | Nie | 39 | tak |