De font-variant-numericeigenschap in CSS ondersteunt de OpenType-lettertypeformaat door op te geven welke numerieke glyphs voor een klasse moeten worden gebruikt, inclusief variaties voor onder meer breuken, ordinale markeringen en opgemaakte variaties.
Een beetje context
We hebben de neiging om getallen te zien als een statische glyph. Het drukt af en zo is het. Cijfers lijken echter veel meer op alfabetletters in de zin dat ze varianten kunnen hebben die, afhankelijk van de context, het de moeite waard maken om de stijl aan te passen. We hebben het over zaken als breuken (bijv. 1/4), rangtelwoorden (bijv. 1e) en zelfs het equivalent van hoofdletters en kleine letters. In tegenstelling tot letters veranderen deze variaties de betekenis van de inhoud echter niet, hoewel ze wel extra context bieden of de leesbaarheid beïnvloeden.
Het probleem met deze eigenschap is dat het is ontworpen om te werken met OpenType-compatibele lettertypen, een nieuwe maar snel ontwikkelende lettertype-indeling die een uitgebreidere set glyphs biedt die kunnen worden gebruikt in verschillende contexten. U hoort vaak dat OpenType variabele lettertypen wordt genoemd en dat komt omdat ze een grotere verscheidenheid aan tekens bevatten, waardoor ze flexibeler zijn voor een verscheidenheid aan toepassingen. Variaties voor alle dingen!
Het probleem is dat de beschikbaarheid van lettertypen die er volledig van kunnen profiteren font-varianten font-variant-numericbeperkt is. Er is een groeiend aantal OpenType-compatibele lettertypen, maar er is een veel kleinere subset van opties die gebruik maken van alle beschikbare functies font-variant-numericen die zijn vaak premium en duur. Richard Butler vat dit mooi samen:
We hebben de beschikking over 'hoofdletters' die lijn- of titelnummers worden genoemd, en 'kleine' cijfers die oude stijl- of tekstcijfers worden genoemd. ingeschakeld en professioneel middel ontworpen met beide sets cijfers.
Het grootste probleem waar we ons doorgaans mee bezighouden als het gaat om CSS-eigenschappen, is browserondersteuning, maar deze eigenschap en alle andere gerelateerde zaken font-variantzijn ook overgeleverd aan de ontwerpers van lettertypen om volledige ondersteuning aan de tafel te bieden.
Dat is jammer, maar we beginnen meer "moderne" en "professionele" lettertypen te zien verschijnen, zelfs op het moment van schrijven. Adobe TypeKit heeft aangekondigd dat het werk gaat om OpenType-functies te ondersteunen en het gerucht gaat dat Google Fonts ook aan boord is nu Chrome 62 ze ondersteunt.
Basisgebruik
Dit is het meest elementaire gebruik van het pand:
.fraction ( font-variant-numeric: diagonal-fractions; )Oudere browsers zullen dat niet herkennen, maar ze accepteren wel font-feature-settingswelke dezelfde functies met verschillende waarden ontgrendelen. We kunnen de twee eigenschappen koppelen voor diepere ondersteuning:
.fraction ( font-feature-settings: frac; font-variant-numeric: diagonal-fractions; )Of we kunnen dit aanpassen om browserondersteuning te gebruiken, @supportszodat de nieuwe eigenschap alleen wordt aangeboden aan ondersteunende browsers:
.fraction ( font-feature-settings: frac; ) @supports (font-variant-numeric: diagonal-fractions) ( .fraction ( font-feature-settings: frac; font-variant-numeric: diagonal-fractions; ) )Waarden
De font-variant-numericeigenschap accepteert de volgende waarden. De bijbehorende font-feature-settingswaarde wordt ter referentie vermeld.
Algemene waarden
| Waarde | Omschrijving | Functie-instelling |
|---|---|---|
normal | Geen van de onderstaande functies is ingeschakeld. | Nvt |
ordinal | Past letters toe om de numerieke volgorde weer te geven, meestal in de vorm van een superscript. | ordn |
slashed-zero | Geeft een alternatieve vorm van nul weer met een diagonale lijn er doorheen. | zero |
Numerieke cijferwaarden
| Waarde | Omschrijving | Functie-instelling |
|---|---|---|
lining-nums | Lijnen lopen verticaal omhoog, zodat ze op dezelfde hoogte blijven, worden uitgelijnd op hetzelfde vlak. | lnum |
oldstyle-nums | Maakt een alternatieve verticale uitlijning mogelijk waarbij getallen niet altijd gelijkmatig op dezelfde basislijn worden weergegeven. | onum |
Numerieke breukwaarden
| Waarde | Omschrijving | Functie-instelling |
|---|---|---|
diagonal-fractions | Geeft breuken weer in een kleiner formaat waarbij de teller (bovenste getal) en noemer (onderste getal) worden gedeeld door een diagonale schuine streep. | frac |
stacked-fractions | Geeft breuken weer in een kleiner formaat waarbij de teller en de noemer op elkaar zijn gestapeld en gedeeld door een horizontale lijn. | afrc |
Numerieke afstandswaarden
| Waarde | Omschrijving | Functie-instelling |
|---|---|---|
proportional-nums | Hiermee kunnen nummers hun eigen hoeveelheid ruimte innemen die niet noodzakelijkerwijs even breed is als andere cijfers. | pnum |
tabular-nums | Geeft getallen weer met gelijke grootte, proportioneel en met gelijke tussenruimte voor schone opmaak in tabelgegevenscontexten. | tnum |
De specificatie bevat een speciale opmerking over het gebruik van ordinalomdat het lijkt op het superscript- supelement, maar anders is gemarkeerd.
Voor superscript:
sup ( font-variant-position: super; )Two squared is 22Voor ordinale markeringen:
.ordinal ( font-variant-numeric: ordinal; )1stBrowser-ondersteuning
De font-variant-numericeigenschap maakt momenteel deel uit van de CSS Fonts Module Level 3-specificatie, die op het moment van schrijven de status Kandidaataanbeveling heeft, wat betekent dat deze op elk moment kan veranderen.
Bureaublad
| Chrome | Rand | Firefox | D.W.Z | Opera | Safari |
|---|---|---|---|---|---|
| 52 | Nee | 34 | Nee | 39 | 9.1 |
Firefox 24-34 (exclusief) ondersteunt de eigenschap achter de layout.css.font-features.enabledvoorkeur wanneer deze is ingesteld op true.
Mobiel
| Android-browser | Chrome Android | Rand | Firefox | D.W.Z | Opera Android | iOS Safari |
|---|---|---|---|---|---|---|
| 52 | 52 | Nee | 34 | Nee | 39 | Ja |