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

Rachel Andrew

CSS font-size-adjust özelliği bugün Chrome'da kullanıma sunuluyor. ve Temel Yeni Kullanılabilir'in parçası haline gelir. Bu özellik, yerleştirildiğinden ve yedek yazı tipleri yüklendiğinde daha küçük yazı tiplerinde yedek yazı tiplerinin okunabilirliğini artırır. font-size-adjust mülk şuranın parçası: Interop 2024, Bu da, web platformu.

Sorun

Şekle ve boyuta bağlı olarak aynı boyuta ayarlanmış iki yazı tipini karşılaştırdığınızda gösterilen metin çok farklı miktarda yer kaplayabilir. Örnek olarak, aşağıdaki demoda Verdana ve geniş çaplı metin, her ikisi de 16 piksele ayarlanır.

Boyuttaki fark, en boy değerinin bir yazı tipindeki büyük harflerle karşılaştırıldığında küçük harflerin yüksekliği, yazı tipine göre değişir.

Bu durum, farklı en boy değerine sahip bir yazı tipi kullanıldığında iki soruna neden olabilir kullanabilirsiniz. Öncelikle, yazı tipinin kapladığı alan miktarı değişir. İkinci olarak, seçtiğiniz yedek yazı tipi, özellikle küçük yazı tipi boyutlarında belirtilir. Bunun nedeni, küçük harfler ile büyüklerin göreli yüksekliği arasındaki fark, daha iyi hale getirir.

font-size-adjust nasıl yardımcı olur?

font-size-adjust özelliği, yedek yazı tipinizi daha iyi hale gelecek şekilde ayarlamanıza olanak tanır. ilk yazı tipiyle aynı olmalıdır. Aşağıdaki örnekte gösterilen iki yazı tipi, Bu kez, ikinci yazı tipi ilkiyle eşleşecek şekilde ayarlanmıştır.

Bu örnekte, bir sayı olan tek bir değer kullanılmaktadır. Bu değer, ex-height varsayılan yazı tipi metriği. Bu, x yüksekliğinin oranı, yazı tipi boyutuna küçük x karakteri ekleyin. Yazı tipini de belirtebilirsiniz metriktir. Bir sonraki örnekte ch-width anahtar kelime (sayıya ek olarak).

Olası tüm değerleri görmek için font-size-adjust için MDN dokümanları.

Yedek yazı tipinizi kullanarak sitenize bakıp font-size-adjust ile yapılacak küçük değişiklikler, yedek yazı tipini kullanan okuyuculara yardımcı olabilir çok daha iyi bir deneyim yaşarsınız. Özellikle şimdi her yerde kullanılabiliyor!