Menentukan perilaku untuk font web saat dimuat dapat menjadi
teknik penyesuaian performa yang penting. Deskripsi font-display baru untuk
@font-face memungkinkan developer menentukan cara font web mereka dirender (atau fallback),
bergantung pada waktu yang diperlukan untuk memuat font.
Perbedaan rendering font saat ini
Font Web memberi developer kemampuan untuk menggabungkan tipografi yang kaya ke dalam project mereka dengan konsekuensi bahwa jika pengguna belum memiliki jenis huruf, browser harus menghabiskan waktu untuk mendownloadnya. Karena jaringan dapat tidak stabil, waktu download ini berpotensi memengaruhi pengalaman pengguna secara negatif. Lagi pula, tidak ada yang akan peduli seberapa bagus teks Anda jika memerlukan waktu yang tidak wajar untuk ditampilkan.
Untuk mengurangi beberapa risiko download font yang lambat, sebagian besar browser menerapkan waktu tunggu, setelah itu font pengganti akan digunakan. Ini adalah teknik yang berguna, tetapi sayangnya browser berbeda dalam penerapan yang sebenarnya.
| Browser | Waktu habis | Pengganti | Tukar |
|---|---|---|---|
| Chrome 35+ | 3 detik | Ya | Ya |
| Opera | 3 detik | Ya | Ya |
| Firefox | 3 detik | Ya | Ya |
| Internet Explorer | 0 detik | Ya | Ya |
| Safari | Tanpa waktu tunggu | T/A | T/A |
- Chrome dan Firefox memiliki waktu tunggu tiga detik, setelah itu teks akan ditampilkan dengan font penggantian. Jika font berhasil didownload, pada akhirnya akan terjadi pertukaran dan teks dirender ulang dengan font yang diinginkan.
- Internet Explorer memiliki waktu tunggu nol detik yang menghasilkan rendering teks langsung. Jika font yang diminta belum tersedia, penggantian akan digunakan, dan teks akan dirender ulang nanti setelah font yang diminta tersedia.
- Safari tidak memiliki perilaku waktu tunggu habis (atau setidaknya tidak ada yang melebihi waktu tunggu jaringan dasar pengukuran).
Lebih buruk lagi, developer memiliki kontrol terbatas dalam memutuskan pengaruh aturan ini terhadap aplikasi mereka. Developer yang mengutamakan performa mungkin lebih memilih pengalaman awal yang lebih cepat yang menggunakan font penggantian, dan hanya memanfaatkan font web yang lebih bagus pada kunjungan berikutnya setelah font tersebut memiliki kesempatan untuk didownload. Dengan menggunakan alat seperti Font Loading API, Anda mungkin dapat mengganti beberapa perilaku browser default dan mendapatkan peningkatan performa, tetapi hal ini akan memerlukan penulisan JavaScript dalam jumlah yang tidak sedikit, yang kemudian harus disisipkan ke dalam halaman atau diminta dari file eksternal, sehingga menimbulkan latensi HTTP tambahan.
Untuk membantu memperbaiki situasi ini, CSS Working Group telah mengusulkan descriptor @font-face baru, font-display, dan properti yang sesuai untuk mengontrol cara font yang dapat didownload dirender sebelum dimuat sepenuhnya.
Linimasa download font
Serupa dengan perilaku waktu tunggu font yang ada yang diterapkan beberapa browser
saat ini, font-display menyegmentasikan masa aktif download font menjadi tiga periode
utama.
- Periode pertama adalah periode blok font. Selama periode ini, jika wajah font tidak dimuat, elemen apa pun yang mencoba menggunakannya harus merender dengan wajah font pengganti yang tidak terlihat. Jika jenis font berhasil dimuat selama periode pemblokiran, jenis font kemudian digunakan secara normal.
- Periode penggantian font terjadi tepat setelah periode pemblokiran font. Selama periode ini, jika font face tidak dimuat, elemen apa pun yang mencoba menggunakannya harus dirender dengan font face pengganti. Jika jenis font berhasil dimuat selama periode swap, jenis font akan digunakan secara normal.
- Periode kegagalan font terjadi segera setelah periode pertukaran font. Jika jenis font belum dimuat saat periode ini dimulai, jenis font akan ditandai sebagai pemuatan yang gagal, yang menyebabkan penggantian font normal. Jika tidak, jenis font akan digunakan secara normal.
Memahami periode ini berarti Anda dapat menggunakan font-display untuk menentukan cara font
dirender, bergantung pada apakah atau kapan font didownload.
Tampilan font mana yang tepat untuk Anda?
Untuk menggunakan deskripsi font-display, tambahkan ke aturan at @font-face 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 block.
memblokir
block memberi tampilan font periode blok yang singkat (3 detik direkomendasikan dalam sebagian besar kasus) dan periode swap yang tidak terbatas. Dengan kata lain, browser menggambar teks "tidak terlihat" pada awalnya jika font tidak dimuat, tetapi menukar tampilan font segera setelah dimuat. Untuk melakukannya, browser membuat tampilan font anonim dengan metrik yang mirip dengan font yang dipilih, tetapi dengan semua glyph yang tidak berisi "tinta". Nilai ini hanya boleh digunakan jika rendering teks dalam jenis huruf tertentu diperlukan agar halaman dapat digunakan.
swap
swap memberi tampilan font periode blok nol detik dan periode swap tanpa batas. Artinya, browser akan langsung menggambar teks dengan penggantian jika jenis font tidak dimuat, tetapi akan menukar jenis font segera setelah dimuat. Serupa dengan block, nilai ini hanya boleh digunakan jika rendering teks dalam font tertentu penting untuk halaman, tetapi rendering dalam font apa pun akan tetap menyampaikan pesan yang benar. Teks logo adalah kandidat yang baik untuk penggantian karena menampilkan nama perusahaan menggunakan penggantian yang wajar akan menyampaikan pesan, tetapi pada akhirnya Anda akan menggunakan typeface resmi.
fallback
Penggantian memberi tampilan font periode blok yang sangat kecil (100 md atau kurang direkomendasikan dalam sebagian besar kasus) dan periode pertukaran yang singkat (tiga detik direkomendasikan dalam sebagian besar kasus). Dengan kata lain, tampilan font dirender dengan penggantian terlebih dahulu jika tidak dimuat, tetapi font akan diganti segera setelah dimuat. Namun, jika terlalu banyak waktu berlalu, penggantian akan digunakan selama sisa lifetime halaman. Penggantian adalah kandidat yang baik untuk hal-hal seperti teks isi yang Anda inginkan agar pengguna mulai membaca sesegera mungkin dan tidak ingin mengganggu pengalaman mereka dengan mengubah teks saat font baru dimuat.
opsional
opsional memberi tampilan font periode blok yang sangat kecil (100 md atau kurang direkomendasikan dalam sebagian besar kasus) dan periode swap nol detik. Serupa dengan fallback, ini adalah pilihan yang baik jika font yang didownload lebih merupakan “fitur yang bagus untuk dimiliki” tetapi tidak penting untuk pengalaman. Nilai opsional menyerahkannya kepada browser untuk memutuskan apakah akan memulai download font, yang dapat dipilih untuk tidak dilakukan atau dapat dilakukan sebagai prioritas rendah, bergantung pada apa yang dianggap paling baik untuk pengguna. Hal ini dapat bermanfaat dalam situasi saat pengguna memiliki koneksi yang lemah dan mendownload font mungkin bukan penggunaan resource yang terbaik.
Dukungan browser
font-display saat ini berada di balik tanda Fitur Platform Web Eksperimental
di Chrome 49 desktop, dan dikirimkan di Opera dan Opera untuk Android.
Demo
Lihat contoh untuk mencoba
font-display. Bagi developer yang mengutamakan performa, ini bisa menjadi salah satu
alat yang berguna di perlengkapan Anda.