A font-variant-numericCSS tulajdonság támogatja az OpenType betűkészlet formátumot azáltal, hogy meghatározza, hogy melyik numerikus karakterjeleket kell egy osztályban használni, ideértve többek között a törtek, a sorszámjelzők és a stílusváltozatok variációit.
Egy kis kontextus
Hajlamosak vagyunk a számokat statikus karakterjelként gondolni. Nyomtat, és ez így van. A számok azonban sokkal inkább hasonlítanak az ábécé betűihez abban az értelemben, hogy lehetnek olyan változataik, amelyek a kontextustól függően érdemesek módosítani a stílust. Olyan dolgokról beszélünk, mint a törtek (pl. 1/4), a ordinálisok (pl. 1.), sőt a nagy- és kisbetűk megfelelője is. A betűktől eltérően azonban ezek a variációk nem változtatják meg a tartalom jelentését, bár további kontextust kölcsönöznek, vagy hatással vannak az olvashatóságra.
A dörzsölés ezzel a tulajdonsággal az, hogy az OpenType-kompatibilis betűtípusokkal működött, egy új, de gyorsan fejlődő betűformátummal, amely szélesebb körű karakterjeleket kínál, amelyek megcélozhatók különböző kontextusokban. Gyakran előfordulhat, hogy az OpenType-t változó betűkészletként emlegetik, és ez azért van, mert nagyobb számú karaktert tartalmaznak, amelyek rugalmasabbá teszik őket a különféle felhasználásokhoz. Változatok minden dologhoz!
A kérdés az, hogy a betűtípusok elérhetősége teljes mértékben kihasználható font-variantés font-variant-numerickorlátozott. Egyre több az OpenType-kompatibilis betűtípus, de sokkal kisebb részhalmaza van azoknak az opcióknak, amelyek kihasználják az összes font-variant-numerickínált funkciót, és amelyek gyakran prémium és drágák. Richard Butler ezt szépen összefoglalja:
A rendelkezésünkre állnak „nagybetűs” számok, amelyeket bélelő vagy címző számoknak hívnak, és „kisbetűs” számok, amelyeket régi stílusú vagy szöveges számoknak nevezünk. mindkét számkészlettel tervezett és professzionális eszközök.
A CSS tulajdonságokkal kapcsolatosan a legnagyobb probléma, amelyet a böngésző támogat, a böngésző támogatása, de ez a tulajdonság és minden más kapcsolódó dolog font-variantszintén a betűtípus-tervezők kegyelmében áll, hogy teljes mértékben támogassák az asztalt.
Ez bummer, de kezdjük látni, hogy több „modern” és „professzionális” betűtípus jelenik meg, még az írás idején is. Az Adobe TypeKit bejelentette, hogy az OpenType funkcióinak támogatására törekszik, és felröppent a hír, hogy a Google Fonts már a fedélzeten is van, mivel a Chrome 62 támogatja őket.
Alapvető használat
Ez az ingatlan legalapvetőbb használata:
.fraction ( font-variant-numeric: diagonal-fractions; )A régebbi böngészők ezt nem ismerik fel, de elfogadják, font-feature-settingsamelyek ugyanazokat a funkciókat különböző értékekkel nyitják meg. Párosíthatjuk a két tulajdonságot a mélyebb támogatás érdekében:
.fraction ( font-feature-settings: frac; font-variant-numeric: diagonal-fractions; )Vagy testreszabhatjuk ezt úgy, hogy kiszűrjük a böngészőtámogatást, @supportsígy az új tulajdonság csak a támogató böngészők számára kerül kiszolgálásra:
.fraction ( font-feature-settings: frac; ) @supports (font-variant-numeric: diagonal-fractions) ( .fraction ( font-feature-settings: frac; font-variant-numeric: diagonal-fractions; ) )Értékek
A font-variant-numericszálláshely a következő értékeket fogadja el. A megfelelő font-feature-settingsértéket referenciaként jegyezzük fel.
Általános értékek
| Érték | Leírás | Funkció beállítása |
|---|---|---|
normal | Az alább felsorolt funkciók egyike sem engedélyezett. | N / A |
ordinal | A betűket a numerikus sorrend képviseletére alkalmazza, általában felső index formájában. | ordn |
slashed-zero | Megjeleníti a nulla alternatív formáját egy átlós vonallal, amely áthalad rajta. | zero |
Numerikus ábraértékek
| Érték | Leírás | Funkció beállítása |
|---|---|---|
lining-nums | A számok függőlegesen felfelé, hogy azonos magasságba tapadjanak, ugyanazon a síkon vannak igazítva. | lnum |
oldstyle-nums | Alternatív függőleges igazítást tesz lehetővé, ahol a számok nem mindig jelennek meg egyenletesen ugyanazon az alapvonalon. | onum |
Numerikus tört értékek
| Érték | Leírás | Funkció beállítása |
|---|---|---|
diagonal-fractions | A törteket kisebb formátumban jeleníti meg, ahol a számlálót (felső szám) és a nevezőt (alsó szám) átlós perjel osztja. | frac |
stacked-fractions | A frakciókat kisebb formátumban jeleníti meg, ahol a számláló és a nevező egymásra vannak rakva, és vízszintes vonallal vannak elosztva. | afrc |
Numerikus térközértékek
| Érték | Leírás | Funkció beállítása |
|---|---|---|
proportional-nums | Lehetővé teszi a számok számára, hogy saját maguk foglalják el a helyüket, amelyek szélessége nem feltétlenül egyenlő a többi számmal. | pnum |
tabular-nums | A táblázatos adatkörnyezetben a tiszta formázáshoz egyenlő méretezéssel, arányossággal és térközökkel rendelkező számokat jelenít meg. | tnum |
A specifikáció tartalmaz egy külön megjegyzést a használatáról, ordinalmivel hasonlít a felső index supelemre, de másképp van jelölve.
A felső indexeknél:
sup ( font-variant-position: super; )Two squared is 22Rendes markerek esetében:
.ordinal ( font-variant-numeric: ordinal; )1stBöngésző támogatás
A font-variant-numerictulajdonság jelenleg a CSS Betűtípusok 3. szintű specifikációjának része, amely a Jelentkezés ajánlása állapotban van az írás idején, ami azt jelenti, hogy bármikor megváltozhat.
Asztal
| Króm | Él | Firefox | AZAZ | Opera | Szafari |
|---|---|---|---|---|---|
| 52 | Nem | 34 | Nem | 39 | 9.1 |
A Firefox 24-34 (exkluzív) támogatja azt a tulajdonságot, amely a layout.css.font-features.enabledpreferencia mögött áll, amikor a beállítás értéke true.
Mobil
| Android böngésző | Chrome Android | Él | Firefox | AZAZ | Opera Android | iOS Safari |
|---|---|---|---|---|---|---|
| 52 | 52 | Nem | 34 | Nem | 39 | Igen |