Penggantian Font yang Stabil Secara Visual

Saat dimuat, font web sering kali menggantikan font pengganti yang memiliki dimensi berbeda, meskipun keduanya ditetapkan ke font-size yang sama. Hal ini menyebabkan "pergeseran tata letak" (Cumulative Layout Shift) dan dapat membuat teks tidak terbaca jika huruf kecil (x-height) pengganti berbeda secara signifikan dari font yang diinginkan.

Properti font-size-adjust mengatasi masalah ini dengan menormalisasi ukuran font berdasarkan metrik tertentu (biasanya x-height), sehingga memastikan teks menempati ruang visual yang sama, terlepas dari font mana yang saat ini aktif.

Langkah-langkah implementasi

1. Mengidentifikasi rasio aspek font yang Anda inginkan

Untuk menormalisasi penggantian, Anda memerlukan "nilai aspek" (rasio huruf kecil terhadap ukuran font) font utama Anda.

• Penemuan otomatis (Direkomendasikan): Gunakan kata kunci from-font untuk mengizinkan browser mengekstrak rasio dari font web utama Anda.
• Penghitungan manual: Jika Anda mengetahui nilai spesifiknya (misalnya, 0,545 untuk Verdana), Anda dapat memberikannya secara langsung untuk kontrol yang lebih akurat.

2. Menerapkan font-size-adjust ke penampung teks

Terapkan properti ke elemen atau penampung induk. Hal ini memastikan bahwa jika font utama gagal dimuat atau sedang dalam proses pemuatan, font pengganti akan diskalakan agar sesuai dengan ukuran visual font utama.

.text-content {
  /* Define your font stack as usual */
  font-family: "MyWebFont", "Arial", sans-serif;
  font-size: 1rem;

  /* MANDATORY: Normalize the font size based on the primary font's x-height.
     This ensures that if 'Arial' is used as a fallback, it is scaled 
     to match the x-height of 'MyWebFont'. */
  font-size-adjust: from-font;
}

3. (Opsional) Menyesuaikan untuk metrik tertentu

Meskipun x-height adalah default dan paling umum, Anda dapat menormalisasi dengan metrik lain seperti cap-height (berguna untuk header huruf besar semua) atau ch-width (berguna untuk font monospace).

h1 {
  /* Normalize based on the height of capital letters */
  font-size-adjust: cap-height from-font;
}

4. Memverifikasi stabilitas visual

Pastikan nilai font-size-adjust menyelaraskan penggantian dengan benar. Anda dapat mengujinya dengan memblokir sementara font web atau menyesuaikan deklarasi font-family di DevTools browser dan memverifikasi bahwa tata letak teks tetap stabil.

Strategi penggantian

Di browser yang tidak mendukung font-size-adjust, font akan dirender pada skala defaultnya. Hal ini dapat menyebabkan pergeseran tata letak atau perubahan keterbacaan selama pertukaran font.

Untuk mengurangi masalah ini tanpa font-size-adjust, Anda dapat menggunakan deskriptor @font-face size-adjust, ascent-override, dan descent-override untuk menyesuaikan font penggantian secara manual, meskipun penghitungannya lebih kompleks daripada satu nilai font-size-adjust.