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:
<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:
<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
seçici {
font-size-adjust: sayı | none;
}
Değerler
| Değer | Açıklama |
|---|---|
number |
Sayı, yazı tipinin en-boy oranını belirtir. |
none |
Yazı tipi boyutu ayarlaması yok. |
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:
<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:
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elitorire
aenean a dapibus magna, ac interdum nisl suspendisse egetile.
</p>
p {
font-size: 16px;
font-family: Georgia, "Times New Roman";
font-size-adjust: 0.5;
}
: