font-variant-numericOminaisuus CSS tukee OpenType muodossa täsmennettävä, mikä numeerista kuviot käytettäväksi luokan, mukaan lukien muunnelmat jakeet, järjestys- markkereita ja tyylistä muunnelmia mm.
Pieni konteksti
Meillä on taipumus ajatella lukuja staattisena glyfinä. Se tulostaa ja niin se on. Numerot ovat kuitenkin paljon enemmän kuin aakkoset siinä mielessä, että niillä voi olla muunnelmia, jotka kontekstista riippuen tekevät tyylin muokkaamisen arvoiseksi. Puhumme esimerkiksi murtoluvuista (esim. 1/4), ordinaaleista (esim. 1.) ja jopa vastaavista isoista ja pienistä numeroista. Toisin kuin kirjaimet, nämä muunnelmat eivät kuitenkaan muuta sisällön merkitystä, vaikka ne antavatkin lisää kontekstia tai vaikuttavat luettavuuteen.
Tämän ominaisuuden hankaus on, että se on suunniteltu toimimaan OpenType-yhteensopivien fonttien kanssa, uuden, mutta nopeasti kehittyvän fontin muodon kanssa, joka tarjoaa laajemman joukon kuvioita, jotka voidaan kohdistaa käytettäväksi eri tilanteissa. Saatat usein kuulla, että OpenTypeä kutsutaan muuttuviksi kirjasimiksi, ja se johtuu siitä, että ne sisältävät suuremman valikoiman merkkejä, jotka tekevät niistä joustavammat erilaisiin käyttötarkoituksiin. Muunnelmat kaikista asioista!
Kysymys on siitä, että fonttien saatavuus, jotka pystyvät hyödyntämään täyden hyödyn font-variantja font-variant-numericovat rajoitettuja. OpenType-yhteensopivia fontteja on yhä enemmän, mutta on paljon pienempi osajoukko vaihtoehtoja, jotka hyödyntävät kaikkia tarjolla olevia ominaisuuksia, font-variant-numericja ne ovat usein ensiluokkaisia ja kalliita. Richard Butler tiivistää tämän hienosti:
Meillä on käytössämme ”isot” numerot, joita kutsutaan vuoraus- tai otsikkolukuiksi, ja ”pienet” numerot, joita kutsutaan vanhan tyylin tai tekstin numeroiksi.… On myös tapaus, että valtaosa kirjasimista ei ole moderneja eikä ammattimaisia, jos moderni tarkoittaa OpenType- käytössä olevat ja ammattimaiset keinot, jotka on suunniteltu molemmilla numerosarjoilla.
Suurin CSS-ominaisuuksiin liittyvä ongelma on yleensä selaintuki, mutta tämä ominaisuus ja kaikki muut siihen liittyvät font-variantovat myös fonttien suunnittelijoiden armoilla tuoda täysi tuki pöydälle.
Se on bummer, mutta olemme alkaneet nähdä enemmän "moderneja" ja "ammattimaisia" fontteja ponnahdusikkunassa, jopa tämän kirjoituksen aikana. Adobe TypeKit ilmoitti työskentelevänsä OpenType-ominaisuuksien tukemiseksi, ja huhutaan, että Google Fonts on mukana myös nyt, kun Chrome 62 tukee niitä.
Peruskäyttö
Tämä on kiinteistön peruskäyttö:
.fraction ( font-variant-numeric: diagonal-fractions; )Vanhemmat selaimet eivät tunnista sitä, mutta ne hyväksyvät, font-feature-settingsjotka avaavat samat ominaisuudet eri arvoilla. Voimme yhdistää nämä kaksi ominaisuutta syvempään tukeen:
.fraction ( font-feature-settings: frac; font-variant-numeric: diagonal-fractions; )Tai voimme räätälöidä tämän haittaamaan selaintukea käyttämällä @supportsniin, että uutta ominaisuutta näytetään vain tukeville selaimille:
.fraction ( font-feature-settings: frac; ) @supports (font-variant-numeric: diagonal-fractions) ( .fraction ( font-feature-settings: frac; font-variant-numeric: diagonal-fractions; ) )Arvot
font-variant-numericOminaisuuden hyväksyy seuraavat arvot. Vastaava font-feature-settingsarvo merkitään viitteeksi.
Yleiset arvot
| Arvo | Kuvaus | Ominaisuuden asetus |
|---|---|---|
normal | Mikään alla luetelluista ominaisuuksista ei ole käytössä. | N / A |
ordinal | Kirjaimet edustavat numeerista järjestystä, yleensä yläindeksin muodossa. | ordn |
slashed-zero | Näyttää vaihtoehtoisen nollamuodon, jonka lävistäjä kulkee sen läpi. | zero |
Numeeriset kuva-arvot
| Arvo | Kuvaus | Ominaisuuden asetus |
|---|---|---|
lining-nums | Viivat, joiden numerot ovat ylöspäin pystysuunnassa, jotta ne kiinnittyvät samaan korkeuteen, kohdistetaan samalle tasolle. | lnum |
oldstyle-nums | Sallii vaihtoehtoisen pystysuoran kohdistuksen, jossa numerot eivät aina näy tasaisesti samalla perusviivalla. | onum |
Numeeriset murtoarvot
| Arvo | Kuvaus | Ominaisuuden asetus |
|---|---|---|
diagonal-fractions | Näyttää murtoluvut pienemmässä muodossa, jossa osoittaja (ylin numero) ja nimittäjä (alin numero) on jaettu diagonaalisella kauttaviivalla. | frac |
stacked-fractions | Näyttää murtoluvut pienemmässä muodossa, jossa osoittaja ja nimittäjä on pinottu päällekkäin ja jaettu vaakasuoralla viivalla. | afrc |
Numeeriset väliarvot
| Arvo | Kuvaus | Ominaisuuden asetus |
|---|---|---|
proportional-nums | Antaa numeroiden viedä oman tilansa, joka ei välttämättä ole yhtä leveä kuin muut numerot. | pnum |
tabular-nums | Näyttää numerot yhtä suurella, suhteellisella ja välimatkalla, jotta muotoilu on taulukkotietokontekstissa helppoa. | tnum |
Tekniset tiedot sisältävät erityisen huomautuksen käytöstä, ordinalkoska se muistuttaa yläindeksielementtiä sup, mutta on merkitty eri tavalla.
Yläindeksit:
sup ( font-variant-position: super; )Two squared is 22Järjestysmerkinnät:
.ordinal ( font-variant-numeric: ordinal; )1stSelaimen tuki
font-variant-numericOmaisuus on nykyään osa CSS fontit Moduuli Taso 3 erittely, joka on soveltuva suosituksessa tilan ennen tätä kirjoitettaessa, minkä vuoksi se voi muuttua milloin tahansa.
Työpöytä
| Kromi | Reuna | Firefox | IE | Ooppera | Safari |
|---|---|---|---|---|---|
| 52 | Ei | 34 | Ei | 39 | 9.1 |
Firefox 24-34 (yksinomainen) tukee layout.css.font-features.enabledasetusta takana olevaa ominaisuutta, kun se on asetettu true.
Matkapuhelin
| Android-selain | Chrome Android | Reuna | Firefox | IE | Opera Android | iOS Safari |
|---|---|---|---|---|---|---|
| 52 | 52 | Ei | 34 | Ei | 39 | Joo |