The font-variant-numericharta di CSS menyokong format font OpenType dengan menentukan yang glyphs angka untuk digunakan pada kelas, termasuk variasi untuk pecahan, penanda ordinal dan variasi gaya antara lain.
Konteks Sedikit
Kita cenderung menganggap nombor sebagai glyph statik. Ia mencetak dan begitulah keadaannya. Walau bagaimanapun, angka lebih mirip huruf abjad dalam arti bahawa mereka boleh mempunyai varian yang, bergantung pada konteksnya, menjadikannya layak untuk mengubah gaya. Kami membincangkan perkara seperti pecahan (mis. 1/4), ordinal (misalnya 1st) dan juga yang setara dengan angka huruf besar dan huruf kecil. Namun, tidak seperti huruf, variasi ini tidak mengubah makna kandungan, walaupun memberi konteks tambahan atau memberi kesan pada keterbacaan.
Masalah dengan sifat ini adalah ia dirancang untuk berfungsi dengan fon yang dibolehkan OpenType, format fon baru yang berkembang pesat yang menyediakan sekumpulan glyph yang lebih luas yang dapat disasarkan untuk digunakan dalam konteks yang berbeza. Anda mungkin sering mendengar OpenType disebut sebagai fon berubah dan itu kerana ia mengandungi pelbagai jenis watak yang lebih besar yang menjadikannya lebih fleksibel untuk pelbagai kegunaan. Variasi untuk semua perkara!
Masalahnya ialah ketersediaan fon yang dapat memanfaatkan sepenuhnya font-variantdan font-variant-numericterhad. Terdapat banyak fon yang sesuai dengan OpenType, tetapi terdapat subkumpulan pilihan yang jauh lebih kecil yang menggunakan semua ciri yang font-variant-numericditawarkan dan seringkali premium dan mahal. Richard Butler merangkumnya dengan baik:
Kami mempunyai nombor 'huruf besar' yang disebut angka garis atau judul, dan angka 'huruf kecil' yang disebut gaya lama atau angka teks. ... Ini juga berlaku bahawa sebilangan besar fon tidak moden atau profesional, jika moden bermaksud OpenType- kaedah yang diaktifkan dan profesional yang dirancang dengan kedua-dua set angka
Isu terbesar yang biasanya kita hadapi ketika datang ke sifat CSS adalah sokongan penyemak imbas, tetapi harta tanah ini dan semua yang berkaitan dengannya font-variantjuga berada di atas belas kasihan pereka fon untuk memberikan sokongan penuh ke meja.
Itu menyedihkan tetapi kami mula melihat lebih banyak fon "moden" dan "profesional" muncul, walaupun pada masa penulisan ini. Adobe TypeKit mengumumkan bahawa ia berfungsi untuk menyokong ciri OpenType dan dikhabarkan bahawa Google Font juga ada sekarang kerana Chrome 62 menyokongnya.
Penggunaan Asas
Ini adalah penggunaan paling asas bagi harta tanah:
.fraction ( font-variant-numeric: diagonal-fractions; )Penyemak imbas lama tidak akan mengenalinya, tetapi mereka menerimanya font-feature-settingsyang membuka ciri yang sama dengan nilai yang berbeza. Kami dapat memasangkan dua sifat untuk sokongan yang lebih mendalam:
.fraction ( font-feature-settings: frac; font-variant-numeric: diagonal-fractions; )Atau, kita dapat menyesuaikannya untuk mengendus sokongan penyemak imbas menggunakan @supportssehingga harta baru hanya disajikan untuk menyokong penyemak imbas:
.fraction ( font-feature-settings: frac; ) @supports (font-variant-numeric: diagonal-fractions) ( .fraction ( font-feature-settings: frac; font-variant-numeric: diagonal-fractions; ) )Nilai
Tempat font-variant-numericpenginapan ini menerima nilai berikut. font-feature-settingsNilai yang sesuai dicatat untuk rujukan.
Nilai Am
| Nilai | Penerangan | Penetapan Ciri |
|---|---|---|
normal | Tiada ciri yang disenaraikan di bawah diaktifkan. | N / A |
ordinal | Menerapkan huruf untuk mewakili susunan angka, biasanya dalam bentuk superskrip. | ordn |
slashed-zero | Memaparkan bentuk sifar alternatif dengan garis pepenjuru yang melaluinya. | zero |
Nilai Angka Berangka
| Nilai | Penerangan | Penetapan Ciri |
|---|---|---|
lining-nums | Garis nombor dengan menegak sehingga melekat pada ketinggian yang sama diselaraskan pada satah yang sama. | lnum |
oldstyle-nums | Membolehkan penjajaran menegak alternatif di mana nombor tidak selalu dipaparkan secara merata pada garis dasar yang sama. | onum |
Nilai Pecahan Berangka
| Nilai | Penerangan | Penetapan Ciri |
|---|---|---|
diagonal-fractions | Memaparkan pecahan dalam format yang lebih kecil di mana pengangka (nombor teratas) dan penyebut (nombor bawah) dibahagi dengan garis miring diagonal. | frac |
stacked-fractions | Memaparkan pecahan dalam format yang lebih kecil di mana pengangka dan penyebutnya disusun satu di atas yang lain dan dibahagi dengan garis mendatar. | afrc |
Nilai Jarak Numerik
| Nilai | Penerangan | Penetapan Ciri |
|---|---|---|
proportional-nums | Membolehkan nombor mengambil jumlah ruang mereka sendiri yang tidak semestinya sama lebarnya dengan angka lain. | pnum |
tabular-nums | Memaparkan nombor dengan ukuran, perkadaran dan jarak yang sama untuk pemformatan bersih dalam konteks data jadual. | tnum |
Spesifikasi tersebut merangkumi catatan khas mengenai penggunaan ordinalkerana menyerupai supelemen superskrip tetapi ditandai dengan cara yang berbeza.
Untuk superskrip:
sup ( font-variant-position: super; )Two squared is 22Untuk penanda ordinal:
.ordinal ( font-variant-numeric: ordinal; )1stSokongan Penyemak Imbas
The font-variant-numericharta kini adalah sebahagian daripada CSS Font Modul Level 3 spesifikasi, yang berada dalam status Syor Calon pada masa penulisan ini, yang bermakna ia boleh berubah pada bila-bila masa.
Desktop
| Chrome | Hujung | Firefox | IE | Opera | Safari |
|---|---|---|---|---|---|
| 52 | Tidak | 34 | Tidak | 39 | 9.1 |
Firefox 24-34 (eksklusif) menyokong harta benda di sebalik layout.css.font-features.enabledpilihan apabila ia ditetapkan true.
Mudah alih
| Penyemak Imbas Android | Android Chrome | Hujung | Firefox | IE | Opera Android | Safari iOS |
|---|---|---|---|---|---|---|
| 52 | 52 | Tidak | 34 | Tidak | 39 | Ya |