Mengontrol Performa Font dengan tampilan font

Rob Dodson

Menentukan perilaku untuk {i>font<i} web saat sedang dimuat dapat menjadi yang penting, dan merupakan teknik tuning performa yang penting. Deskriptor tampilan font baru untuk @font-face memungkinkan developer menentukan cara font web mereka dirender (atau diganti), tergantung pada berapa lama waktu yang dibutuhkan untuk memuat.

Perbedaan rendering font saat ini

{i>Web Fonts<i} memberi pengembang kemampuan untuk memasukkan tipografi yang kaya ke dalam proyek mereka dengan konsekuensi jika pengguna belum memiliki {i>typeface<i} (jenis huruf) yang dibutuhkan {i>browser<i} perlu waktu untuk mengunduhnya. Karena jaringan dapat tidak stabil, waktu download ini berpotensi berdampak buruk pada pengalaman yang lancar bagi developer. Lagi pula, tidak ada yang akan peduli seberapa cantik teks Anda jika membutuhkan waktu yang sangat banyak untuk ditampilkan!

Untuk mengurangi risiko unduhan {i>font<i} yang lambat, kebanyakan browser mengimplementasikan waktu tunggu hingga font pengganti akan digunakan. Ini adalah teknik yang berguna, tetapi sayangnya browser berbeda pada implementasi yang sebenarnya.

Browser Waktu habis Pengganti Tukar
Chrome 35 dan yang lebih baru 3 detik Ya Ya
Opera 3 detik Ya Ya
Firefox 3 detik Ya Ya
Internet Explorer 0 detik Ya Ya
Safari Tidak ada waktu tunggu T/A T/A
  • Chrome dan Firefox memiliki waktu tunggu tiga detik setelah teks ditampilkan dengan font pengganti. Jika font berhasil didownload, maka pada akhirnya penukaran muncul dan teks dirender ulang dengan {i>font<i} yang dimaksud.
  • Internet Explorer tidak memiliki waktu tunggu nol detik yang menghasilkan teks langsung proses rendering. Jika {i>font<i} yang diminta belum tersedia, sebuah pengganti akan digunakan, dan teks dirender ulang nanti setelah font yang diminta tersedia.
  • Safari tidak memiliki perilaku waktu tunggu (atau setidaknya tidak ada di luar jaringan dasar pengukuran waktu tunggu).

Untuk memperburuk masalah, developer memiliki kontrol terbatas dalam menentukan cara aturan akan mempengaruhi penerapan mereka. Developer yang mengutamakan performa mungkin lebih memilih untuk mendapatkan pengalaman awal yang lebih cepat yang menggunakan font pengganti, dan hanya memanfaatkan {i>font<i} web yang lebih bagus pada kunjungan berikutnya setelah sempat diunduh. Dengan menggunakan alat seperti Font Loading API, Anda dapat mengganti beberapa perilaku browser default dan mencapai peningkatan kinerja, namun biaya penulisan JavaScript dalam jumlah yang besar, yang kemudian harus yang disisipkan ke dalam halaman atau diminta dari file eksternal, sehingga menimbulkan Latensi HTTP.

Untuk membantu memperbaiki situasi ini, Kelompok Kerja CSS telah mengusulkan sebuah @font-face, font-display, dan properti yang sesuai untuk mengontrol cara font yang dapat didownload dirender sebelum dimuat sepenuhnya.

Linimasa download font

Mirip dengan perilaku waktu tunggu font yang ada yang diterapkan beberapa browser saat ini, font-display membagi masa aktif download font menjadi tiga bagian utama periode.

  1. Periode pertama adalah periode pemblokiran font. Selama periode ini, jika bentuk font tidak dimuat, elemen apa pun yang mencoba menggunakannya harus merender dengan tampilan font pengganti yang tidak terlihat. Jika bentuk font berhasil dimuat selama periode pemblokiran, maka bentuk {i>font<i} kemudian digunakan secara normal.
  2. Periode pertukaran font terjadi segera setelah periode pemblokiran font. Selama periode ini, jika bentuk {i>font<i} tidak dimuat, elemen apa pun yang mencoba menggunakannya harus merender dengan bentuk font pengganti. Jika bentuk font berhasil dimuat selama periode pertukaran, tampilan font akan digunakan secara normal.
  3. Periode kegagalan font terjadi segera setelah periode penukaran font. Jika bentuk font belum dimuat saat periode ini dimulai, ditandai sebagai gagal dimuat, yang menyebabkan penggantian font normal. Jika tidak, font wajah digunakan normal.

Dengan memahami periode ini, Anda dapat menggunakan font-display untuk menentukan cara {i>font<i} harus dirender, tergantung pada apakah atau kapan itu diunduh.

Tampilan font mana yang tepat untuk Anda?

Untuk menggunakan deskriptor font-display, tambahkan @font-face at-rules Anda:

@font-face {
    font-family: 'Arvo';
    font-display: auto;
    src: local('Arvo'), url(https://fonts.gstatic.com/s/arvo/v9/rC7kKhY-eUDY-ucISTIf5PesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
}

font-display saat ini mendukung rentang nilai berikut auto | block | swap | fallback | optional.

otomatis

auto menggunakan strategi tampilan font apa pun yang digunakan agen pengguna. Sebagian besar browser saat ini memiliki strategi default yang mirip dengan blokir.

memblokir

block memberi tampilan font periode pemblokiran yang singkat (3 detik direkomendasikan dalam sebagian besar kasus) dan periode pertukaran tak terbatas. Dengan kata lain, browser menggambar "tidak terlihat" teks mula-mula jika {i>font<i} tidak dimuat, tetapi menukar bentuk {i>font<i} segera setelah memuat. Untuk melakukannya, browser membuat tampilan font anonim dengan metrik mirip dengan font yang dipilih tetapi dengan semua glyph yang tidak berisi "tinta". Nilai ini hanya boleh digunakan jika merender teks dalam jenis huruf tertentu yang diperlukan agar halaman dapat digunakan.

tukar

swap memberi tampilan font periode pemblokiran nol detik dan periode penukaran tanpa batas. Ini berarti browser segera menggambar teks dengan penggantian jika bentuk font tidak dimuat, namun menukar bentuk font segera setelah dimuat. Serupa dengan block, nilai ini hanya boleh digunakan saat merender teks dalam font tertentu penting untuk halaman, tetapi rendering dalam font apa pun tetap akan mendapatkan pesan secara keseluruhan. Teks logo adalah kandidat yang baik untuk swap karena menampilkan menggunakan penggantian yang masuk akal akan membuat pesan tersampaikan, tetapi Anda akhirnya menggunakan jenis huruf resmi.

fallback

fallback memberikan tampilan font periode pemblokiran yang sangat kecil (100 md atau kurang adalah direkomendasikan dalam kebanyakan kasus) dan periode pertukaran yang singkat (disarankan tiga detik dalam kebanyakan kasus). Dengan kata lain, bentuk font dirender dengan fallback di terlebih dahulu jika tidak dimuat, tetapi {i>font<i} akan ditukar segera setelah dimuat. Namun, jika terlalu banyak waktu berlalu, penggantian akan digunakan untuk sisa waktu seumur hidup. penggantian adalah kandidat yang baik untuk hal-hal seperti teks isi di mana Anda akan seperti pengguna untuk mulai membaca sesegera mungkin dan tidak ingin mengganggu pengalaman mereka dengan menggeser teks saat {i>font<i} baru dimuat.

opsional

opsional memberikan bentuk font periode pemblokiran yang sangat kecil (100 md atau kurang adalah direkomendasikan dalam kebanyakan kasus) dan periode pertukaran nol detik. Serupa dengan fallback, ini adalah pilihan yang baik jika {i>font<i} download lebih “bagus untuk dimiliki” tetapi tidak terlalu penting untuk pengalaman. Nilai opsional menyerahkan browser untuk memutuskan apakah akan memulai download font, yang dapat dipilih untuk dilakukan atau mungkin melakukannya sebagai prioritas rendah tergantung pada apa yang menurutnya terbaik untuk pengguna. Hal ini dapat bermanfaat dalam situasi ketika pengguna sedang menggunakan koneksi yang lemah dan menarik {i>font<i} ke bawah mungkin bukan penggunaan resource terbaik.

Dukungan browser

font-display saat ini berada di belakang tanda Fitur Platform Web Eksperimental di Chrome 49 versi desktop, serta diluncurkan di Opera dan Opera untuk Android.

Demo

Lihat contoh untuk memberikan font-display pukulan. Bagi developer yang mengutamakan performa, bisa jadi salah satu sangat berguna di panel menu Anda!