Properti font-size-adjust
CSS hadir di Chrome hari ini,
dan menjadi bagian dari Baseline Newly Available. Properti ini dapat membantu mencegah
menggeser tata letak saat font pengganti dimuat, dan pastikan
keterbacaan font pengganti pada ukuran font yang lebih kecil. font-size-adjust
merupakan bagian dari
Interop 2024,
jadi ini adalah kemenangan lain bagi
upaya untuk meningkatkan interoperabilitas
Google Cloud Platform.
Permasalahan
Saat Anda membandingkan dua font yang ditetapkan dengan ukuran yang sama, bergantung pada bentuk dan ukurannya glyph, teks yang ditampilkan bisa membutuhkan ruang yang sangat berbeda. Misalnya, demo berikut menampilkan teks dalam bahasa Verdana dan Arial, keduanya diatur ke 16 {i>pixel<i}.
Perbedaan ukuran diperhitungkan oleh fakta bahwa nilai aspek, tinggi huruf kecil bila dibandingkan dengan huruf besar pada {i>font<i}, bervariasi antarfont.
Hal ini dapat menyebabkan dua masalah jika font dengan nilai aspek yang berbeda digunakan sebagai pengganti. Pertama-tama, jumlah spasi yang digunakan oleh {i>font<i} akan berubah. Kedua, pilihan font pengganti Anda mungkin kurang terbaca daripada yang ditentukan terlebih dahulu, terutama pada ukuran font kecil. Hal ini karena tinggi relatif huruf kecil ke huruf besar adalah faktor kunci dalam keterbacaan.
Cara font-size-adjust
membantu
Properti font-size-adjust
memungkinkan Anda menyesuaikan font penggantian agar lebih baik
cocok dengan {i>font<i} pertama. Contoh berikut menunjukkan dua font yang ditampilkan
sebelumnya, kali ini {i>font<i} kedua telah disesuaikan agar cocok dengan yang pertama.
Contoh ini menggunakan nilai tunggal, angka, yang menyesuaikan {i>font<i} menggunakan
metrik font default ex-height
. Ini adalah rasio tinggi x,
tinggi x huruf kecil dari {i>font<i} ke ukuran {i>font<i}. Anda juga dapat menentukan
metrik yang digunakan. Pada contoh berikutnya, saya telah menormalisasi {i>font<i} menggunakan
ch-width
kata kunci, selain angka.
Untuk melihat semua kemungkinan nilai, lihat
Dokumentasi MMD untuk font-size-adjust
.
Ada baiknya melihat situs Anda menggunakan {i>font<i} penggantian Anda dan melihat apakah
menyesuaikan dengan font-size-adjust
dapat membantu pembaca yang menggunakan font penggantian
memiliki pengalaman yang lebih baik, terutama karena kini fitur ini tersedia di mana saja.