CSS font-size-customize kini berada di Dasar Pengukuran

Rachel Andrew

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.