Yayınlanma tarihi: 23 Temmuz 2024
CSS font-size-adjust
mülkü bugün Chrome'da kullanıma sunuluyor ve Yeni Kullanıma Sunulan Temel Özellikler'in bir parçası oluyor. Bu özellik, yedek yazı tipleri yüklendiğinde düzeninizin kaymasını önlemeye ve yedek yazı tiplerinin daha küçük yazı tipi boyutlarında okunaklı olmasını sağlamaya yardımcı olabilir. font-size-adjust
mülk, Interop 2024'ün bir parçası olduğundan bu, web platformunun birlikte çalışabilirliğini iyileştirme çabalarında elde edilen bir başka başarıdır.
Sorun
Aynı boyuta ayarlanmış iki yazı tipini karşılaştırdığınızda, karakterlerin şekline ve boyutuna bağlı olarak görüntülenen metin çok farklı bir alan kaplayabilir. Örneğin, aşağıdaki demoda Verdana ve Arial yazı tipleri 16 piksel olarak ayarlanmıştır.
Boyuttaki fark, yazı tipindeki büyük harflere kıyasla küçük harflerin yüksekliği olan en boy oranı değerinin yazı tipleri arasında farklılık göstermesi nedeniyle ortaya çıkar.
Bu durum, yedek olarak farklı bir en boy oranı değerine sahip bir yazı tipi kullanıldığında iki soruna neden olabilir. Öncelikle yazı tipinin kapladığı alan miktarı değişir. İkinci olarak, yedek yazı tipi seçiminiz özellikle küçük yazı tipi boyutlarında ilk belirtilen yazı tipinden daha az okunaklı olabilir. Bunun nedeni, küçük harflerin büyük harflere kıyasla göreceli yüksekliğinin okunabilirlik açısından önemli bir faktör olmasıdır.
font-size-adjust
nasıl yardımcı olur?
font-size-adjust
mülkü, yedek yazı tipinizi ilk yazı tipiyle daha iyi eşleşecek şekilde ayarlamanıza olanak tanır. Aşağıdaki örnekte, daha önce gösterilen iki yazı tipi gösterilmektedir. Bu sefer ikinci yazı tipi, birinciyle eşleşecek şekilde ayarlanmıştır.
Bu örnekte, yazı tiplerini ex-height
varsayılan yazı tipi metriğini kullanarak ayarlayan tek bir değer (sayı) kullanılmaktadır. Bu, x yüksekliğinin (yazı tipindeki küçük x harfinin yüksekliği) yazı tipi boyutuna oranıdır. Ayrıca kullanılan yazı tipi metriğini de belirtebilirsiniz. Sonraki örnekte, sayıya ek olarak ch-width
anahtar kelimesini kullanarak yazı tiplerini normalleştirdim.
Olası tüm değerleri görmek için font-size-adjust
için MDN belgelerine bakın.
Sitenizde yedek yazı tipinizi kullanarak bir inceleme yapmanızı ve font-size-adjust
ile küçük bir ayarlama yaparak yedek yazı tipini kullanan okuyucuların daha iyi bir deneyim yaşamalarına yardımcı olup olmayacağını görmenizi öneririz. Özellikle de artık her yerde kullanılabilen bu yazı tipini kullanabilirsiniz.