font-variant-numericNemovitost v CSS podporuje OpenType formát písma zadáním, které číselné glyphs použít na třídě, včetně variací na zlomky, řadové markerů a stylizovaných variace mezi ostatními.
Malý kontext
Máme tendenci myslet na čísla jako na statický glyf. Vytiskne se a tak to je. Čísla však mnohem více připomínají písmena abecedy v tom smyslu, že mohou mít varianty, které v závislosti na kontextu stojí za to změnit styl. Mluvíme o věcech, jako jsou zlomky (např. 1/4), ordinály (např. 1.) a dokonce i ekvivalent velkých a malých číslic. Na rozdíl od písmen však tyto varianty nemění význam obsahu, i když poskytují další kontext nebo mají vliv na čitelnost.
Tření s touto vlastností spočívá v tom, že byla navržena pro práci s písmy s povoleným OpenType, novým, ale rychle se rozvíjejícím formátem písma, který poskytuje rozsáhlejší sadu glyfů, na které lze cílit v různých kontextech. Často můžete slyšet OpenType označované jako variabilní písma, a to proto, že obsahují větší škálu znaků, díky nimž jsou flexibilnější pro nejrůznější použití. Variace pro všechny věci!
Problém je, že dostupnost fontů, které jsou schopny plně využít font-varianta font-variant-numericje omezen. Roste počet písem kompatibilních s OpenType, ale existuje mnohem menší podmnožina možností, které využívají všechny funkce, které font-variant-numericnabízejí, a ty jsou často prémiové a drahé. Richard Butler to shrnuje pěkně:
Máme k dispozici „velká“ čísla, která se nazývají podšívkou nebo číslováním, a „malá“ čísla, která se nazývají starými nebo textovými čísly.… Je také pravda, že drtivá většina písem není ani moderní, ani profesionální, pokud moderní znamená OpenType- povolené a profesionální prostředky navržené s oběma sadami číslic.
Největší problém, který nás obvykle zajímá, pokud jde o vlastnosti CSS, je podpora prohlížeče, ale tato vlastnost a všechny ostatní související font-variantjsou také na milost a nemilost designérů písem, aby přinesly plnou podporu tabulce.
To je trapné, ale začínáme vidět více „moderních“ a „profesionálních“ písem, a to i v době psaní tohoto článku. Adobe TypeKit oznámil, že pracuje na podpoře funkcí OpenType, a říká se, že Google Fonts je na palubě také nyní, když je Chrome 62 podporuje.
Základní použití
Toto je nejzákladnější využití vlastnosti:
.fraction ( font-variant-numeric: diagonal-fractions; )Starší prohlížeče to nerozpoznají, ale přijímají, font-feature-settingskteré odemknou stejné funkce s různými hodnotami. Pro hlubší podporu můžeme spárovat dvě vlastnosti:
.fraction ( font-feature-settings: frac; font-variant-numeric: diagonal-fractions; )Nebo to můžeme přizpůsobit tak, aby čichalo podporu prohlížeče pomocí @supports, aby se nová vlastnost sloužila pouze pro podporu prohlížečů:
.fraction ( font-feature-settings: frac; ) @supports (font-variant-numeric: diagonal-fractions) ( .fraction ( font-feature-settings: frac; font-variant-numeric: diagonal-fractions; ) )Hodnoty
font-variant-numericHotelu je možné platit následující hodnoty. Odpovídající font-feature-settingshodnota je uvedena pro referenci.
Obecné hodnoty
| Hodnota | Popis | Nastavení funkcí |
|---|---|---|
normal | Žádná z níže uvedených funkcí není povolena. | N / A |
ordinal | Aplikuje písmena na reprezentaci číselného pořadí, obvykle ve formě horního indexu. | ordn |
slashed-zero | Zobrazí alternativní formu nuly s diagonální čarou, která prochází. | zero |
Hodnoty číselných hodnot
| Hodnota | Popis | Nastavení funkcí |
|---|---|---|
lining-nums | Čáry řádků nahoru se svisle, aby přilnuly ke stejné výšce, jsou zarovnány ve stejné rovině. | lnum |
oldstyle-nums | Umožňuje alternativní vertikální zarovnání, kde čísla nejsou vždy rovnoměrně zobrazena na stejné účaří. | onum |
Číselné hodnoty zlomků
| Hodnota | Popis | Nastavení funkcí |
|---|---|---|
diagonal-fractions | Zobrazí zlomky v menším formátu, kde jsou čitatel (horní číslo) a jmenovatel (spodní číslo) rozděleny šikmým lomítkem. | frac |
stacked-fractions | Zobrazí zlomky v menším formátu, kde jsou čitatel a jmenovatel naskládány na sebe a děleny vodorovnou čarou. | afrc |
Číselné mezery
| Hodnota | Popis | Nastavení funkcí |
|---|---|---|
proportional-nums | Umožňuje číslům zabírat vlastní prostor, který nemusí mít nutně stejnou šířku jako ostatní číslice. | pnum |
tabular-nums | Zobrazuje čísla se stejnou velikostí, proporcionálními a mezerami pro čisté formátování v tabulkových datových kontextech. | tnum |
Specifikace obsahuje speciální poznámku o použití, ordinalprotože se podobá hornímu indexovému supprvku, ale je označena odlišně.
Pro horní indexy:
sup ( font-variant-position: super; )Two squared is 22Pro řadové značky:
.ordinal ( font-variant-numeric: ordinal; )1stPodpora prohlížeče
font-variant-numericVlastnost je v současné době součástí specifikace CSS Fonts Module Level 3, který je v kandidátském statusu doporučení v době psaní tohoto článku, což znamená, že se může měnit v každém okamžiku.
plocha počítače
| Chrome | Okraj | Firefox | TJ | Opera | Safari |
|---|---|---|---|---|---|
| 52 | Ne | 34 | Ne | 39 | 9.1 |
Firefox 24-34 (exkluzivní) podporuje vlastnost za layout.css.font-features.enabledpředvolbou, když je nastavena na true.
mobilní, pohybliví
| Prohlížeč Android | Chrome pro Android | Okraj | Firefox | TJ | Opera pro Android | iOS Safari |
|---|---|---|---|---|---|---|
| 52 | 52 | Ne | 34 | Ne | 39 | Ano |