CSS font-size-adjust artık Baseline'da

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.

Verdana ve Arial'da 16 piksel olarak görüntülenen metin.

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.

font-size-adjust kullanımı.

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.

font-size-adjust'yi ch-width yazı tipi metriğiyle kullanma.

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.