font-size-adjust Özelliği

font-size-adjust özelliği, değişmeyen font-size değerine rağmen yazı tipi boyutunu kontrol etmeye (arttırmaya veya azaltmaya) olanak tanır.

Uygulama: font-family içinde virgülle ayrılmış iki yazı tipi tanımlandığını varsayalım, örneğin, Georgia, "Times New Roman". Kullanıcının bilgisayarında Georgia yazı tipinin bulunmadığını varsayalım - bu durumda "Times New Roman" uygulanacaktır. Ancak, bir problemle karşılaşırız - aynı font-size değerine rağmen yazı tipleri farklı görünecektir. Aşağıdaki örnekte her iki paragrafa da 16px font-size değeri verilmiştir, ancak farklı font-family değerleri atanmıştır. Boyutların nasıl farklılaştığına bakın:

html<p style="font-size: 16px; font-family: Georgia;">
  Lorem ipsum dolor sit amet.
</p>
<p style="font-size: 16px; font-family: 'Times New Roman';">
  Lorem ipsum dolor sit amet.
</p>

Результат:

Bu durum, görüntülenen yazı tipi boyutunun büyük ölçüde, yazı tipinin genel boyutunu belirleyen font-size özelliğinden değil, font-size özelliğinin değerleri ile x-height büyüklüğü arasındaki orandan kaynaklanır (x-height - belirli bir yazı tipi için küçük "x" harfi ile büyük "X" harfi arasındaki boyut farkıdır).

Bu oran, yazı tipinin en-boy oranı (aspect ratio) olarak adlandırılır ve şu formülle hesaplanır: en-boy oranı = font-size / x-height.

Boyut problemleri, font-size-adjust özelliği (yazı tipinin en-boy oranını değiştirmeye yarar) ile çözülür, bu özellik ikinci yazı tipinin ilkiyle aynı boyutta görünmesini sağlar.

Times New Roman yazı tipinin, Georgia kadar büyük görünmesini sağlayalım. Georgia'nın en-boy oranının 0.5 olduğunu biliyoruz (aşağıdaki tabloya bakın).

Times New Roman ile yazılmış metin için font-size-adjust değerini 0.5 olarak ayarlayalım ve ikinci metnin ilkiyle aynı boyuta geldiğini görelim:

html<p style="font-size: 16px; font-family: Georgia;">
  Lorem ipsum dolor sit amet.
</p>
<p style="font-size: 16px; font-family: 'Times New Roman'; font-size-adjust: 0.5;">
  Lorem ipsum dolor sit amet.
</p>

Результат:

Sözdizimi

cssseçici {
  font-size-adjust: sayı | none;
}

Değerler

Varsayılan değer: none.

Bir yazı tipi için en-boy oranı değeri nasıl belirlenir?

W3C spesifikasyonundan bir alıntıya bakın: Seçilen yazı tipleri için orantı katsayısı (en-boy oranı), aynı metnin farklı font-size-adjust değerleriyle karşılaştırılması yoluyla hesaplanabilir. Eğer özellik değeri doğru şekilde seçilirse, aynı yazı tipi boyutunda metin, sayfada kullanılan tüm yazı tipleri için aynı kalacaktır.

Bazı yazı tipleri için bilinen en-boy oranı değerlerini veriyorum: Georgia - 0.5, Times New Roman - 0.46, Verdana - 0.58.

Örnek

Aynı font-size ve font-family değerlerine sahip metnin farklı font-size-adjust değerleriyle nasıl göründüğünü karşılaştırın:

html<p style="font-size: 16px; font-family: 'Times New Roman';  font-size-adjust: none;">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p style="font-size: 16px; font-family: 'Times New Roman';  font-size-adjust: 0.5;">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p style="font-size: 16px; font-family: 'Times New Roman';  font-size-adjust: 0.6;">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>

Результат:

Örnek . Gerçek hayatta kullanım

Aşağıdaki kod, kullanıcının bilgisayarında Georgia yazı tipinin bulunmaması durumunda, uygulanan Times New Roman yazı tipinin, Georgia ile aynı boyutta olmasını sağlar:

html<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elitorire
  aenean a dapibus magna, ac interdum nisl suspendisse egetile.
</p>

cssp {
  font-size: 16px;
  font-family: Georgia, "Times New Roman";
  font-size-adjust: 0.5;
}

Результат: