Den font-variant-numericegendom i CSS stöder Opentype-teckensnitt format genom att ange vilka numeriska tecken för att använda på en klass, inklusive variationer för fraktioner, ordning markörer och stylade variationer bland annat.
Lite sammanhang
Vi brukar tänka på siffror som ett statiskt tecken. Det skrivs ut och så är det. Men siffror är mycket mer som alfabetbokstäver i den meningen att de kan ha varianter som, beroende på sammanhanget, gör det värt att ändra stilen. Vi pratar om saker som bråk (t.ex. 1/4), ordinarier (t.ex. 1: a) och till och med motsvarande siffror för stora och små bokstäver. Men till skillnad från bokstäver ändrar inte dessa variationer innehållets innebörd, även om de ger ytterligare sammanhang eller påverkar läsbarheten.
Gnuggan med den här egenskapen är att den utformades för att fungera med OpenType-aktiverade teckensnitt, ett nytt men snabbt utvecklande teckensnittsformat som ger en mer omfattande uppsättning glyfer som kan riktas till att användas i olika sammanhang. Du kanske ofta hör OpenType som kallas variabla teckensnitt och det beror på att de innehåller ett större antal tecken som gör dem mer flexibla för en mängd olika användningsområden. Variationer för alla saker!
Problemet är att tillgängligheten av teckensnitt som kan dra full nytta av font-variantoch font-variant-numericär begränsad. Det finns ett växande antal OpenType-kompatibla teckensnitt, men det finns en mycket mindre delmängd av alternativ som använder alla funktioner som font-variant-numericerbjuds och de är ofta premium och dyra. Richard Butler sammanfattar detta snyggt:
Vi har 'stora bokstäver' som kallas foder eller rubriksiffror och 'små bokstäver' som kallas gammal stil eller textsiffror. ... Det är också så att de allra flesta teckensnitt varken är moderna eller professionella, om modern betyder OpenType- aktiverade och professionella medel utformade med båda siffrorna.
Det största problemet som vi vanligtvis är bekymrade över när det gäller CSS-egenskaper är webbläsarstöd, men den här egenskapen och alla andra relaterade till font-variantär också prisgiven för teckensnittsdesigners för att ge fullt stöd till tabellen.
Det är en bummer men vi börjar se mer "moderna" och "professionella" teckensnitt dyker upp, även när detta skrivs. Adobe TypeKit tillkännagav att det fungerar för att stödja OpenType-funktioner och det har ryktats om att Google Fonts är med ombord nu när Chrome 62 stöder dem.
Grundläggande användning
Detta är den mest grundläggande användningen av fastigheten:
.fraction ( font-variant-numeric: diagonal-fractions; )Äldre webbläsare känner inte igen det, men de accepterar font-feature-settingsvilka låser upp samma funktioner med olika värden. Vi kan para ihop de två egenskaperna för djupare stöd:
.fraction ( font-feature-settings: frac; font-variant-numeric: diagonal-fractions; )Eller så kan vi skräddarsy detta för att sniffa ut webbläsarsupport med hjälp av @supportsså att den nya egenskapen endast serveras till stödjande webbläsare:
.fraction ( font-feature-settings: frac; ) @supports (font-variant-numeric: diagonal-fractions) ( .fraction ( font-feature-settings: frac; font-variant-numeric: diagonal-fractions; ) )Värden
Den font-variant-numericfastighet accepterar följande värden. Motsvarande font-feature-settingsvärde noteras som referens.
Allmänna värden
| Värde | Beskrivning | Funktionsinställning |
|---|---|---|
normal | Ingen av funktionerna nedan är aktiverade. | Ej tillämpligt |
ordinal | Tillämpar bokstäver för att representera numerisk ordning, vanligtvis i form av ett superscript. | ordn |
slashed-zero | Visar en alternativ form av noll med en diagonal linje som går igenom den. | zero |
Numeriska figurvärden
| Värde | Beskrivning | Funktionsinställning |
|---|---|---|
lining-nums | Linjer uppåt med vertikalt så att de håller sig till samma höjd är inriktade på samma plan. | lnum |
oldstyle-nums | Tillåter en alternativ vertikal inriktning där siffror inte alltid visas jämnt på samma baslinje. | onum |
Numeriska bråkvärden
| Värde | Beskrivning | Funktionsinställning |
|---|---|---|
diagonal-fractions | Visar bråk i ett mindre format där täljaren (toppnummer) och nämnaren (bottennummer) divideras med en diagonal snedstreck. | frac |
stacked-fractions | Visar bråk i mindre format där täljaren och nämnaren staplas ovanpå varandra och delas med en horisontell linje. | afrc |
Numeriska avståndsvärden
| Värde | Beskrivning | Funktionsinställning |
|---|---|---|
proportional-nums | Tillåter att siffror tar upp sin egen mängd utrymme som inte nödvändigtvis är lika breda som andra siffror. | pnum |
tabular-nums | Visar siffror med samma storlek, proportionella och avstånd för ren formatering i tabellformade datakontexter. | tnum |
Specifikationen innehåller en speciell anmärkning om användningen av ordinaleftersom den liknar superscript- supelementet men markeras annorlunda.
För övertryck:
sup ( font-variant-position: super; )Two squared is 22För ordinarie markörer:
.ordinal ( font-variant-numeric: ordinal; )1stWebbläsarstöd
Den font-variant-numericegenskapen är för närvarande en del av CSS teckensnitt Module Nivå 3-specifikationen, som är i Candidate Recommendation status vid tidpunkten för denna skrift, vilket betyder att det kan ändras när som helst.
Skrivbord
| Krom | Kant | Firefox | IE | Opera | Safari |
|---|---|---|---|---|---|
| 52 | Nej | 34 | Nej | 39 | 9.1 |
Firefox 24-34 (exklusivt) stöder egenskapen bakom layout.css.font-features.enabledpreferensen när den är inställd på true.
Mobil
| Android-webbläsare | Chrome Android | Kant | Firefox | IE | Opera Android | iOS Safari |
|---|---|---|---|---|---|---|
| 52 | 52 | Nej | 34 | Nej | 39 | Ja |