16 of 313 menu

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; }

:

Türkçe
AfrikaansAzərbaycanБългарскиবাংলাБеларускаяČeštinaDanskDeutschΕλληνικάEnglishEspañolEestiSuomiFrançaisहिन्दीMagyarՀայերենIndonesiaItaliano日本語ქართულიҚазақ한국어КыргызчаLietuviųLatviešuМакедонскиMelayuမြန်မာNederlandsNorskPolskiPortuguêsRomânăРусскийසිංහලSlovenčinaSlovenščinaShqipСрпскиSrpskiSvenskaKiswahiliТоҷикӣไทยTürkmenЎзбекOʻzbekTiếng Việt
Web sitesinin çalışması, analiz ve kişiselleştirme için çerezleri kullanıyoruz. Veri işleme, Gizlilik Politikası'na uygun olarak gerçekleşir.
tümünü kabul et özelleştir reddet