font-variant-numericCSS nuosavybė palaiko Opentype šrifto formatą, nurodant, kurie skaitmeniniai molio naudoti ant klasės, įskaitant variantų frakcijas, skaitvardžiai žymekliai ir stiliaus variacijas kiti.
Šiek tiek konteksto
Mes esame linkę galvoti apie skaičius kaip apie statinį glifą. Tai spausdinama ir taip yra. Tačiau skaičiai yra daug panašesni į abėcėlės raides ta prasme, kad jie gali turėti variantų, dėl kurių verta keisti stilių, atsižvelgiant į kontekstą. Mes kalbame apie tokius dalykus kaip trupmenos (pvz., 1/4), ordinalai (pvz., 1) ir net didžiųjų ir mažųjų skaičių atitikmenys. Tačiau, skirtingai nei raidės, šios variacijos nepakeičia turinio prasmės, nors jos suteikia papildomą kontekstą arba daro įtaką įskaitomumui.
Ši savybė yra ta, kad ji buvo sukurta dirbti su „OpenType“ įgalintais šriftais - nauju, bet greitai besivystančiu šrifto formatu, kuris suteikia platesnį glifų rinkinį, kurį galima naudoti skirtinguose kontekstuose. Jūs dažnai girdite „OpenType“, vadinamą kintamuoju šriftu, ir todėl, kad juose yra didesnė simbolių įvairovė, todėl jie yra lankstesni įvairiems tikslams. Visų dalykų variantai!
Klausimas yra tas, kad šriftų, kurie gali visapusiškai pasinaudoti font-variantir font-variant-numericyra riboti, prieinamumas. Yra vis daugiau „OpenType“ suderinamų šriftų, tačiau yra daug mažesnis parinkčių rinkinys, kuris naudojasi visomis font-variant-numericsiūlomomis funkcijomis, o jos dažnai yra aukščiausios kokybės ir brangios. Richardas Butleris tai gerai apibendrina:
Mes turime „didžiųjų“ numerių, vadinamų pamušalu arba pavadinimo skaičiais, ir „mažųjų“ skaičių, vadinamų senojo stiliaus arba teksto skaitmenimis. įgalintos ir profesionalios priemonės, sukurtos naudojant abu skaičių rinkinius.
Didžiausia problema, su kuria paprastai susiduriame, kalbant apie CSS ypatybes, yra naršyklės palaikymas, tačiau ši nuosavybė ir visos kitos susijusios, font-varianttaip pat yra šriftų dizainerių valios, kad lentelė būtų visiškai palaikoma.
Tai bumas, bet mes pradedame matyti „šiuolaikiškesnius“ ir „profesionalesnius“ šriftus net šio rašymo metu. „Adobe TypeKit“ paskelbė, kad stengiasi palaikyti „OpenType“ funkcijas, ir buvo kalbėta, kad „Google“ šriftai yra ir dabar, kai „Chrome 62“ juos palaiko.
Pagrindinis naudojimas
Tai yra pats pagrindinis turto naudojimas:
.fraction ( font-variant-numeric: diagonal-fractions; )Senesnės naršyklės to nepripažins, tačiau jos priima font-feature-settingstas pačias funkcijas su skirtingomis reikšmėmis. Mes galime susieti dvi savybes, kad palaikytume giliau:
.fraction ( font-feature-settings: frac; font-variant-numeric: diagonal-fractions; )Arba galime tai pritaikyti norėdami išnaudoti naršyklės palaikymą @supports, kad naujoji nuosavybė būtų teikiama tik palaikančioms naršyklėms:
.fraction ( font-feature-settings: frac; ) @supports (font-variant-numeric: diagonal-fractions) ( .fraction ( font-feature-settings: frac; font-variant-numeric: diagonal-fractions; ) )Vertybės
font-variant-numericNuosavybė priima šias vertybes. Atitinkama font-feature-settingsvertė yra pažymėta kaip nuoroda.
Bendrosios vertybės
| Vertė | apibūdinimas | Funkcijos nustatymas |
|---|---|---|
normal | Nei viena iš toliau išvardytų funkcijų nėra įjungta. | Nėra |
ordinal | Taikomos raidės, nurodančios skaitinę tvarką, paprastai viršutinio indekso forma. | ordn |
slashed-zero | Rodoma pakaitinė nulio forma su įstriža linija, kuri eina per ją. | zero |
Skaitmeninės paveikslų vertės
| Vertė | apibūdinimas | Funkcijos nustatymas |
|---|---|---|
lining-nums | Linijos, susidedančios į vertikaliai, kad jos laikytųsi to paties aukščio, būtų išlygintos toje pačioje plokštumoje. | lnum |
oldstyle-nums | Leidžia pakaitinį vertikalų lygiavimą, kai skaičiai ne visada vienodai rodomi toje pačioje bazinėje linijoje. | onum |
Skaitinės trupmenos vertės
| Vertė | apibūdinimas | Funkcijos nustatymas |
|---|---|---|
diagonal-fractions | Rodomos mažesnio formato trupmenos, kur skaitiklis (viršutinis skaičius) ir vardiklis (apatinis skaičius) padalijamas įstrižais pasviraisiais. | frac |
stacked-fractions | Rodomos mažesnio formato trupmenos, kur skaitiklis ir vardiklis yra sukrauti vienas ant kito ir padalyti iš horizontalios linijos. | afrc |
Skaitinės tarpo vertės
| Vertė | apibūdinimas | Funkcijos nustatymas |
|---|---|---|
proportional-nums | Leidžia skaičiams užimti savo vietą, kurios plotis nebūtinai yra lygus kitiems skaitmenims. | pnum |
tabular-nums | Rodomi vienodo dydžio, proporcingo ir tarpo skaičiai, kad būtų aiškus formatavimas lentelių duomenų kontekstuose. | tnum |
Specifikacijoje yra speciali pastaba dėl, ordinalnes ji yra panaši į viršutinio indekso supelementą, tačiau yra pažymėta skirtingai.
Viršutiniams indeksams:
sup ( font-variant-position: super; )Two squared is 22Domeno žymekliams:
.ordinal ( font-variant-numeric: ordinal; )1stNaršyklės palaikymas
Šiuo font-variant-numericmetu ši nuosavybė yra CSS šriftų modulio 3 lygio specifikacijos dalis, kuri šio rašymo metu yra kandidatų rekomendacijos būsenoje, o tai reiškia, kad ji gali bet kada pasikeisti.
Darbalaukis
| „Chrome“ | Briauna | „Firefox“ | T.Y | Opera | „Safari“ |
|---|---|---|---|---|---|
| 52 | Ne | 34 | Ne | 39 | 9.1 |
„Firefox 24-34“ (išskirtinis) palaiko nuosavybę layout.css.font-features.enabled, kuri yra pasirinkta, kai ji nustatyta true.
Mobilusis
| „Android“ naršyklė | „Chrome“ „Android“ | Briauna | „Firefox“ | T.Y | „Opera“ „Android“ | „iOS Safari“ |
|---|---|---|---|---|---|---|
| 52 | 52 | Ne | 34 | Ne | 39 | Taip |