Yazı tipi boyutunu ayarlama - CSS Hileleri

Anonim

Bu özellik, geliştiricilere font-sizebir öğenin değerini büyük harf yerine küçük harflerinin boyutuna bağlı olarak ayarlama yeteneği verir .

.element ( font-size: 22px; font-size-adjust: .5; )

Bu durumda, yazı tipinin küçük harfleri 22 x .5 = 11 olduğundan 11 piksel yüksekliğinde olacaktır.

Yazı tiplerini yüklerken, bir yedek yazı tipinin küçük harfleri ile yeni yüklenen yazı tipi arasında farklı bir en boy oranı olması muhtemeldir; bu nedenle font-size-adjust, yeni bir yazı bildirip font-familyStilsiz Metin Flaşını (FOUT) gördüğümüzde yeniden akıtma miktarını kontrol etmek yararlıdır .

Aşağıdaki demoda, Chaparral gibi bir web fontunun x-yüksekliği ve geri dönüş fontu olan Times'daki karakterlerin hizalamasından nasıl farklı olduğunu göstermek için bu özelliği açıp kapatmak mümkündür. Ancak dikkat edin, bu özellik şu anda yalnızca az sayıda tarayıcı tarafından desteklenmektedir.

Bu, gövde metninin büyük bölümleri üzerine ayarlandığında çarpıcı etkilere sahip olabilir ve yedek ile yeni yüklenen yazı tipi arasında geçiş yaparken oluşan titremeyi önemli ölçüde iyileştirebilir:

Daha fazla bilgi

  • MDN
  • W3C

Tarayıcı desteği

Bu tarayıcı destek verileri, daha fazla ayrıntıya sahip olan Caniuse'den alınmıştır. Bir sayı, tarayıcının özelliği o sürümde ve sonrasında desteklediğini gösterir.

Masaüstü Bilgisayar

Krom Firefox IE Kenar Safari
Hayır 3 Hayır Hayır Hayır

Mobil / Tablet

Android Chrome Android Firefox Android iOS Safari
Hayır Hayır Hayır Hayır