font-variant-numericNehnuteľnosť v CSS podporuje OpenType formát písma zadaním, ktoré číselné glyphs použiť na triede, vrátane variácií na zlomky, radové markerov a štylizovaných variácie medzi ostatnými.
Malý kontext
Máme tendenciu myslieť si na čísla ako na statický glyf. Vytlačí sa a je to tak. Čísla sa však oveľa viac podobajú písmenám abecedy v tom zmysle, že môžu mať varianty, ktoré v závislosti od kontextu stojí za to zmeniť štýl. Hovoríme o veciach ako zlomky (napr. 1/4), radové čísla (napr. 1.) a dokonca aj ekvivalent veľkých a malých číslic. Na rozdiel od písmen však tieto variácie nemenia význam obsahu, poskytujú však ďalší kontext alebo majú vplyv na čitateľnosť.
Táto vlastnosť spočíva v tom, že bola navrhnutá na prácu s fontami s povoleným OpenType, novým, ale rýchlo sa rozvíjajúcim formátom písma, ktorý poskytuje rozsiahlejšiu sadu glyfov, na ktoré je možné zacieliť použitie v rôznych kontextoch. Často môžete počuť OpenType, ktorý sa nazýva variabilné písmo, a to preto, lebo obsahuje väčšiu škálu znakov, vďaka ktorým sú flexibilnejšie pre rôzne použitie. Variácie pre všetky veci!
Problém je, že dostupnosť fontov, ktoré sú schopné plne využiť font-varianta font-variant-numericje obmedzený. Rastie počet písiem kompatibilných s OpenType, ale existuje oveľa menšia podmnožina možností, ktoré využívajú všetky font-variant-numericponúkané funkcie a sú často prémiové a drahé. Richard Butler to pekne zhrnul:
Máme k dispozícii „veľké“ čísla, ktoré sa nazývajú spojovacie alebo titulkové číslice, a „malé“ číslice, ktoré sa nazývajú staré alebo textové číslice.… Je tiež pravda, že drvivá väčšina typov písma nie je ani moderná, ani profesionálna, ak moderná znamená OpenType- povolené a profesionálne prostriedky navrhnuté s oboma množinami číslic.
Najväčším problémom, ktorý nás zvyčajne zaujíma, pokiaľ ide o vlastnosti CSS, je podpora prehľadávača, ale táto vlastnosť a všetky ďalšie súvisiace font-variantsú tiež vydané na milosť a nemilosť návrhárov písma, aby priniesli tabuľke úplnú podporu.
To je nepríjemné, ale začíname vidieť, že sa v čase písania tohto článku objavujú ďalšie „moderné“ a „profesionálne“ písma. Program Adobe TypeKit oznámil, že podporuje funkcie OpenType, a hovorí sa o tom, že Google Fonts je tiež teraz, keď ich podporuje Chrome 62.
Základné použitie
Toto je najzákladnejšie využitie nehnuteľnosti:
.fraction ( font-variant-numeric: diagonal-fractions; )Staršie prehliadače to nerozpoznajú, ale akceptujú, font-feature-settingsktoré odomknú rovnaké funkcie s rôznymi hodnotami. Pre hlbšiu podporu môžeme spárovať tieto dve vlastnosti:
.fraction ( font-feature-settings: frac; font-variant-numeric: diagonal-fractions; )Alebo to môžeme prispôsobiť tak, aby vyňuchalo podporu prehliadača pomocou @supports, aby sa nová vlastnosť zobrazovala iba podporným prehliadačom:
.fraction ( font-feature-settings: frac; ) @supports (font-variant-numeric: diagonal-fractions) ( .fraction ( font-feature-settings: frac; font-variant-numeric: diagonal-fractions; ) )Hodnoty
Toto font-variant-numericubytovacie zariadenie akceptuje nasledujúce hodnoty. Zodpovedajúca font-feature-settingshodnota je uvedená pre referenciu.
Všeobecné hodnoty
| Hodnota | Popis | Nastavenie funkcií |
|---|---|---|
normal | Nie sú povolené žiadne z nižšie uvedených funkcií. | N / A |
ordinal | Aplikuje písmená na vyjadrenie číselného poradia, zvyčajne vo forme horného indexu. | ordn |
slashed-zero | Zobrazí alternatívnu formu nuly s diagonálnou čiarou, ktorá ňou prechádza. | zero |
Hodnoty číselných čísel
| Hodnota | Popis | Nastavenie funkcií |
|---|---|---|
lining-nums | Čísla riadkov hore s vertikálne, aby sa držali rovnakej výšky, sú zarovnané v rovnakej rovine. | lnum |
oldstyle-nums | Umožňuje alternatívne vertikálne zarovnanie, pri ktorom sa čísla nie vždy zobrazujú rovnomerne na tej istej základnej čiare. | onum |
Číselné hodnoty zlomkov
| Hodnota | Popis | Nastavenie funkcií |
|---|---|---|
diagonal-fractions | Zobrazí zlomky v menšom formáte, kde čitateľ (horné číslo) a menovateľ (spodné číslo) sú rozdelené lomítkom. | frac |
stacked-fractions | Zobrazí zlomky v menšom formáte, kde sú čitateľ a menovateľ naukladané jeden na druhom a rozdelené vodorovnou čiarou. | afrc |
Číselné medzery
| Hodnota | Popis | Nastavenie funkcií |
|---|---|---|
proportional-nums | Umožňuje číslam zaberať vlastné množstvo miesta, ktoré sa nemusí nevyhnutne rovnať šírke ostatných číslic. | pnum |
tabular-nums | Zobrazuje čísla s rovnakou veľkosťou, proporcionálnymi a medzery pre čisté formátovanie v tabuľkových dátových kontextoch. | tnum |
Špecifikácia obsahuje špeciálnu poznámku o použití, ordinalpretože sa podobá hornému indexovému supprvku, ale je označená inak.
Pre horné indexy:
sup ( font-variant-position: super; )Two squared is 22Pre radové značky:
.ordinal ( font-variant-numeric: ordinal; )1stPodpora prehľadávača
Toto font-variant-numericzariadenie je v súčasnosti súčasťou špecifikácie CSS Fonts Module úrovne 3, ktorá je v čase písania tohto dokumentu v stave Kandidátske odporúčanie, čo znamená, že sa môže kedykoľvek zmeniť.
Desktop
| Chrome | Hrana | Firefox | IE | Opera | Safari |
|---|---|---|---|---|---|
| 52 | Nie | 34 | Nie | 39 | 9.1 |
Firefox 24-34 (exkluzívny) podporuje túto vlastnosť za layout.css.font-features.enabledpredvoľbou, ak je nastavená na true.
Mobilné
| Prehliadač Android | Chrome pre Android | Hrana | Firefox | IE | Opera Android | iOS Safari |
|---|---|---|---|---|---|---|
| 52 | 52 | Nie | 34 | Nie | 39 | Áno |