The font-variant-numericproperti di CSS mendukung format font OpenType oleh yang menetapkan mesin terbang numerik untuk digunakan pada kelas, termasuk variasi untuk pecahan, spidol ordinal dan variasi gaya antara lain.
Sedikit Konteks
Kami cenderung menganggap angka sebagai mesin terbang statis. Ini mencetak dan begitulah adanya. Namun, angka lebih seperti huruf alfabet dalam arti bahwa angka dapat memiliki varian yang, tergantung pada konteksnya, membuatnya layak untuk dimodifikasi gayanya. Kita berbicara tentang hal-hal seperti pecahan (misalnya 1/4), ordinal (misalnya 1) dan bahkan padanan angka huruf besar dan huruf kecil. Namun, tidak seperti huruf, variasi ini tidak mengubah makna konten, meskipun memberikan konteks tambahan atau berdampak pada keterbacaan.
Masalah dengan properti ini adalah bahwa properti ini dirancang untuk bekerja dengan font yang mendukung OpenType, format font baru namun berkembang dengan cepat yang menyediakan serangkaian mesin terbang yang lebih luas yang dapat ditargetkan untuk digunakan dalam konteks yang berbeda. Anda mungkin sering mendengar OpenType disebut sebagai font variabel dan itu karena mereka berisi lebih banyak variasi karakter yang membuatnya lebih fleksibel untuk berbagai kegunaan. Variasi untuk semua hal!
Masalahnya adalah ketersediaan font yang dapat memanfaatkan sepenuhnya font-variantdan font-variant-numericterbatas. Ada semakin banyak font yang kompatibel dengan OpenType, tetapi ada subset opsi yang jauh lebih kecil yang memanfaatkan semua fitur yang font-variant-numericditawarkan dan seringkali premium dan mahal. Richard Butler menyimpulkannya dengan baik:
Kami memiliki nomor 'huruf besar' yang kami miliki yang disebut angka lapisan atau judul, dan angka 'huruf kecil' yang disebut gaya lama atau angka teks.… Ini juga kasus bahwa sebagian besar font tidak modern atau profesional, jika modern berarti OpenType- sarana berkemampuan dan profesional yang dirancang dengan kedua set angka.
Masalah terbesar yang biasanya kami khawatirkan terkait properti CSS adalah dukungan browser, tetapi properti ini dan semua yang terkait lainnya font-variantjuga bergantung pada desainer font untuk memberikan dukungan penuh ke tabel.
Itu menyedihkan tapi kami mulai melihat lebih banyak font "modern" dan "profesional" muncul, bahkan pada saat tulisan ini dibuat. Adobe TypeKit mengumumkan bahwa itu berfungsi untuk mendukung fitur OpenType dan ada desas-desus bahwa Google Fonts juga ada sekarang karena Chrome 62 mendukungnya.
Penggunaan Dasar
Ini adalah penggunaan paling dasar dari properti:
.fraction ( font-variant-numeric: diagonal-fractions; )Peramban lama tidak akan mengenalinya, tetapi mereka menerima font-feature-settingsyang membuka fitur yang sama dengan nilai yang berbeda. Kami dapat memasangkan dua properti untuk dukungan yang lebih dalam:
.fraction ( font-feature-settings: frac; font-variant-numeric: diagonal-fractions; )Atau, kita dapat menyesuaikan ini untuk mengendus dukungan browser yang digunakan @supportssehingga properti baru hanya disajikan ke browser pendukung:
.fraction ( font-feature-settings: frac; ) @supports (font-variant-numeric: diagonal-fractions) ( .fraction ( font-feature-settings: frac; font-variant-numeric: diagonal-fractions; ) )Nilai
The font-variant-numericproperti menerima nilai-nilai berikut. Nilai yang sesuai font-feature-settingsdicatat untuk referensi.
Nilai Umum
| Nilai | Deskripsi | Pengaturan Fitur |
|---|---|---|
normal | Tak satu pun dari fitur yang tercantum di bawah ini diaktifkan. | T / A |
ordinal | Menerapkan huruf untuk mewakili urutan numerik, biasanya dalam bentuk superskrip. | ordn |
slashed-zero | Menampilkan bentuk nol alternatif dengan garis diagonal yang melewatinya. | zero |
Nilai Angka Numerik
| Nilai | Deskripsi | Pengaturan Fitur |
|---|---|---|
lining-nums | Garis dinomori secara vertikal sehingga menempel pada ketinggian yang sama akan disejajarkan pada bidang yang sama. | lnum |
oldstyle-nums | Memungkinkan perataan vertikal alternatif di mana angka tidak selalu ditampilkan secara merata pada garis dasar yang sama. | onum |
Nilai Pecahan Numerik
| Nilai | Deskripsi | Pengaturan Fitur |
|---|---|---|
diagonal-fractions | Menampilkan pecahan dalam format yang lebih kecil di mana pembilang (angka atas) dan penyebut (angka bawah) dibagi dengan garis miring diagonal. | frac |
stacked-fractions | Menampilkan pecahan dalam format yang lebih kecil dengan pembilang dan penyebut ditumpuk satu sama lain dan dibagi dengan garis horizontal. | afrc |
Nilai Spasi Numerik
| Nilai | Deskripsi | Pengaturan Fitur |
|---|---|---|
proportional-nums | Mengizinkan angka untuk mengambil jumlah ruangnya sendiri yang lebarnya tidak harus sama dengan angka lain. | pnum |
tabular-nums | Menampilkan angka dengan ukuran, proporsional, dan spasi yang sama untuk pemformatan yang bersih dalam konteks data tabel. | tnum |
Spesifikasi menyertakan catatan khusus pada penggunaan ordinalkarena menyerupai supelemen superscript tetapi diberi markup berbeda.
Untuk superskrip:
sup ( font-variant-position: super; )Two squared is 22Untuk penanda ordinal:
.ordinal ( font-variant-numeric: ordinal; )1stDukungan Browser
The font-variant-numericproperti saat ini merupakan bagian dari CSS Font Modul Level 3 spesifikasi, yang dalam status Rekomendasi Calon pada saat penulisan ini, yang berarti dapat berubah setiap saat.
Desktop
| Chrome | Tepi | Firefox | YAITU | Opera | Safari |
|---|---|---|---|---|---|
| 52 | Tidak | 34 | Tidak | 39 | 9.1 |
Firefox 24-34 (eksklusif) mendukung properti di balik layout.css.font-features.enabledpreferensi saat disetel ke true.
Seluler
| Browser Android | Chrome Android | Tepi | Firefox | YAITU | Opera Android | iOS Safari |
|---|---|---|---|---|---|---|
| 52 | 52 | Tidak | 34 | Tidak | 39 | Iya |