CSS'deki font-variant-numericözellik, bir sınıfta hangi sayısal gliflerin kullanılacağını belirleyerek OpenType font formatını destekler; kesirler için varyasyonlar, sıralı işaretçiler ve diğerleri arasında stilli varyasyonlar.
Biraz Bağlam
Sayıları statik bir glif olarak düşünme eğilimindeyiz. Basılıyor ve bu böyle. Bununla birlikte, sayılar, bağlama bağlı olarak stili değiştirmeye değer kılan değişkenlere sahip olmaları açısından alfabe harflerine çok benzer. Kesirler (örneğin 1/4), sıra sayıları (örneğin 1.) ve hatta büyük ve küçük harflerin eşdeğerlerinden bahsediyoruz. Bununla birlikte, harflerin aksine, bu varyasyonlar içeriğin anlamını değiştirmezler, ancak ek bir bağlam sağlarlar veya okunaklılık üzerinde bir etkiye sahiptirler.
Bu özellikle ilgili sorun, farklı bağlamlarda kullanılmak üzere hedeflenebilecek daha kapsamlı bir glif kümesi sağlayan yeni ancak hızla gelişen bir yazı tipi biçimi olan OpenType etkin yazı tipleriyle çalışmak üzere tasarlanmış olmasıdır. OpenType'ın değişken yazı tipleri olarak adlandırıldığını sık sık duyabilirsiniz ve bunun nedeni, onları çeşitli kullanımlar için daha esnek hale getiren daha çeşitli karakterler içermeleridir. Her şey için varyasyonlar!
Sorun, tam olarak yararlanabilen font-variantve font-variant-numericsınırlı olan yazı tiplerinin mevcudiyetidir . Giderek artan sayıda OpenType uyumlu yazı tipi vardır, ancak font-variant-numericsunulan tüm özelliklerden yararlanan çok daha küçük bir seçenek alt kümesi vardır ve bunlar genellikle birinci sınıf ve pahalıdır. Richard Butler bunu güzelce özetliyor:
Emrimizde astar veya başlık rakamları olarak adlandırılan 'büyük harfli' sayılar ve eski stil veya metin rakamları olarak adlandırılan 'küçük harfli' rakamlar var. ... Aynı zamanda, yazı tiplerinin büyük çoğunluğunun ne modern ne de profesyonel olması durumunda, eğer modern OpenType- her iki sayı kümesiyle tasarlanmış etkin ve profesyonel araçlar.
Tipik olarak CSS özellikleri söz konusu olduğunda ilgilendiğimiz en büyük sorun tarayıcı desteğidir, ancak bu özellik ve ilgili tüm diğer font-variantözellikler de tabloya tam destek sağlamak için yazı tipi tasarımcılarının insafına kalmıştır.
Bu bir serseri, ancak bu yazının yazıldığı sırada bile daha "modern" ve "profesyonel" yazı tiplerinin ortaya çıktığını görmeye başlıyoruz. Adobe TypeKit, OpenType özelliklerini desteklemek için çalıştığını duyurdu ve artık Google Fonts'un da Chrome 62 tarafından desteklendiği için gemide olduğu söyleniyor.
Temel Kullanım
Bu, mülkün en temel kullanımıdır:
.fraction ( font-variant-numeric: diagonal-fractions; )Daha eski tarayıcılar bunu tanımaz, ancak font-feature-settingshangi özelliklerin farklı değerlerle kilidini açtığını kabul ederler . Daha derin destek için iki özelliği eşleştirebiliriz:
.fraction ( font-feature-settings: frac; font-variant-numeric: diagonal-fractions; )Ya da bunu, tarayıcı desteğini kullanarak @supportsyeni özelliğin yalnızca destekleyen tarayıcılara sunulması için uyarlayabiliriz :
.fraction ( font-feature-settings: frac; ) @supports (font-variant-numeric: diagonal-fractions) ( .fraction ( font-feature-settings: frac; font-variant-numeric: diagonal-fractions; ) )Değerler
font-variant-numericÖzellik aşağıdaki değerleri kabul eder. İlgili font-feature-settingsdeğer referans için not edilmiştir.
Genel Değerler
| Değer | Açıklama | Özellik Ayarı |
|---|---|---|
normal | Aşağıda listelenen özelliklerin hiçbiri etkinleştirilmemiştir. | Yok |
ordinal | Harfleri, genellikle bir üst simge biçiminde sayısal sırayı temsil etmek için uygular. | ordn |
slashed-zero | İçinden geçen çapraz bir çizgi ile alternatif bir sıfır biçimi görüntüler. | zero |
Sayısal Şekil Değerleri
| Değer | Açıklama | Özellik Ayarı |
|---|---|---|
lining-nums | Numaralar dikey olarak yukarı doğru, böylece aynı yüksekliğe yapışırlar, aynı düzlemde hizalanırlar. | lnum |
oldstyle-nums | Sayıların aynı taban çizgisinde her zaman eşit olarak görüntülenmediği alternatif bir dikey hizalamaya izin verir. | onum |
Sayısal Kesir Değerleri
| Değer | Açıklama | Özellik Ayarı |
|---|---|---|
diagonal-fractions | Payın (üst sayı) ve paydanın (alttaki sayı) köşegen eğik çizgiyle bölündüğü kesirleri daha küçük bir biçimde görüntüler. | frac |
stacked-fractions | Pay ve paydanın üst üste yığıldığı ve yatay bir çizgi ile bölündüğü daha küçük bir formatta kesirleri görüntüler. | afrc |
Sayısal Aralık Değerleri
| Değer | Açıklama | Özellik Ayarı |
|---|---|---|
proportional-nums | Sayıların, diğer sayılara eşit genişlikte olması gerekmeyen kendi alanlarını kaplamalarına izin verir. | pnum |
tabular-nums | Tablo veri bağlamlarında temiz formatlama için eşit boyutta, orantılı ve aralıklı sayıları görüntüler. | tnum |
Spesifikasyon ordinal, üst simge supöğesine benzediği, ancak farklı şekilde işaretlendiği için kullanımı hakkında özel bir not içerir .
Üst simgeler için:
sup ( font-variant-position: super; )Two squared is 22Sıralı işaretçiler için:
.ordinal ( font-variant-numeric: ordinal; )1stTarayıcı Desteği
font-variant-numericMülkiyet şu anda her an değiştirebilir araçlarının bu yazı, zamanında Aday Öneri durumundayken CSS Yazı Modülü Seviye 3 şartnamenin bir parçasıdır.
Masaüstü Bilgisayar
| Krom | Kenar | Firefox | IE | Opera | Safari |
|---|---|---|---|---|---|
| 52 | Hayır | 34 | Hayır | 39 | 9.1 |
Firefox 24-34 (özel), layout.css.font-features.enabledolarak ayarlandığında tercihin arkasındaki özelliği destekler true.
Cep Telefonu
| Android Tarayıcı | Chrome Android | Kenar | Firefox | IE | Opera Android | iOS Safari |
|---|---|---|---|---|---|---|
| 52 | 52 | Hayır | 34 | Hayır | 39 | Evet |