Properti font-size-adjust

Properti font-size-adjust memungkinkan kontrol atas ukuran font, dengan font-size yang tetap (memperbesar atau memperkecil).

Penerapan: misalkan dalam font-family terdapat dua font yang ditentukan dipisahkan koma, contohnya, Georgia, "Times New Roman". Misalkan pada komputer pengguna tidak ada font Georgia - dalam hal ini "Times New Roman" akan diterapkan. Namun, kita akan menghadapi masalah - dengan nilai font-size yang sama font akan terlihat berbeda. Dalam contoh di bawah ini, kedua paragraf diberikan font-size sebesar 16px, tetapi font-family yang berbeda. Perhatikan perbedaan ukurannya:

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

Hal ini terjadi karena ukuran font yang ditampilkan lebih bergantung bukan pada properti font-size, yang hanya menentukan ukuran font secara umum, tetapi pada rasio nilai properti font-size dan besaran x-height (x-height - ini adalah perbedaan antara ukuran huruf kecil "x" dan huruf besar "X" untuk font tertentu).

Rasio ini disebut aspek font dan dihitung dengan rumus: aspek = font-size / x-height.

Masalah ukuran diselesaikan oleh properti font-size-adjust (ini memungkinkan perubahan aspek font), yang akan membuat font kedua terlihat berukuran sama dengan yang pertama.

Mari kita buat font Times New Roman berukuran sama dengan Georgia. Kita tahu aspek Georgia - yaitu 0.5 (lihat tabel di bawah).

Mari atur font-size-adjust untuk teks dengan Times New Roman ke nilai 0.5 dan kita akan lihat bahwa teks kedua menjadi berukuran sama dengan yang pertama:

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

Sintaksis

selektor {
	font-size-adjust: angka | none;
}

Nilai

Nilai	Keterangan
`number`	Angka menentukan aspek font.
`none`	Tidak ada penyesuaian ukuran font.

Nilai default: none.

Bagaimana cara menentukan nilai aspek untuk font?

Lihat kutipan dari spesifikasi W3C: Faktor proporsionalitas (aspek) untuk font yang dipilih dapat dihitung dengan membandingkan teks yang sama, tetapi dengan nilai font-size-adjust yang berbeda. Jika nilai properti dipilih dengan benar, maka dengan ukuran font yang sama teks akan tetap tidak berubah untuk semua font yang digunakan pada halaman.

Saya berikan nilai aspek yang saya ketahui untuk beberapa font: Georgia - 0.5, Times New Roman - 0.46, Verdana - 0.58.

Contoh

Bandingkan bagaimana teks terlihat dengan nilai font-size-adjust yang berbeda dan font-size serta font-family yang sama:

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

Contoh . Penerapan dalam kehidupan nyata

Kode di bawah ini membuat agar jika tidak ada font Georgia di komputer pengguna, font yang diterapkan Times New Roman akan berukuran sama dengan Georgia:

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