font-display: swap segera menampilkan font cadangan dan bertukar saat font web mendarat. Jujur saja, dan ini menyebabkan tata letak berguncang yang telah Anda lihat ribuan kali: teks mengalir ulang saat dibaca, judulnya bergeser, tombol di bawahnya bergerak. Penggantian metrik menyelesaikan masalah ini dengan memalsukan pertukaran.

@font-face {
  font-family: "Gloock Fallback";
  src: local("Georgia");
  size-adjust: 104%;
  ascent-override: 92%;
  descent-override: 22%;
  line-gap-override: 0%;
}

:root {
  font-family: "Gloock", "Gloock Fallback", serif;
}

Mengapa penggantian metrik memperbaiki perubahan posisi

  • size-adjust menskalakan fallback sehingga lebar yang diberikan mendekati font web; pertukaran hanya memindahkan beberapa karakter.
  • penggantian pendakian, penurunan, dan celah garis menyematkan metrik vertikal fallback ke font web, sehingga kotak garis berhenti berfungsi ulang.
  • local() mengambil font yang sudah dimiliki pengguna, sehingga fallback tidak pernah diunduh; seluruh trik menambahkan nol byte.
  • Webfont itu sendiri menyimpan font-display: swap, jadi first paint tidak pernah menunggu file font sama sekali.

Mendapatkan angka-angka dengan jujur

  1. Muat font web dan fallback secara berdampingan pada halaman pengujian, lalu sesuaikan keempat penggantian hingga kedua string menempati kotak yang sama; kilatan cat devtools browser menunjukkan dengan tepat metrik mana yang tidak aktif.
  2. Komunitas fontTools memiliki jalur perkakas untuk mendapatkan penyesuaian ukuran secara otomatis dari dua file font; penyetelan tangan per pasang juga tiga menit.
  3. Turunkan kembali ketika salah satu font berubah; tabel metrik adalah data, dan data memerlukan pemilik.
  4. Uji nomor CLS di Lighthouse sebelum dan sesudah; perubahan posisi situs ini berhenti diukur pada nol pada pergeseran judul.

Font adalah satu-satunya sumber daya yang dimuat halaman sebelum dapat melukis teksnya sendiri, dan metrik fallback adalah satu-satunya cara yang jujur ​​untuk membuat pemuatan tersebut tidak terlihat. Rekayasa tipografi yang sangat gacor tanpa JavaScript di mana pun.