The font-displaymendefinisikan properti bagaimana file font yang dimuat dan ditampilkan oleh browser. Ini diterapkan pada @font-faceaturan yang mendefinisikan font khusus di stylesheet.
@font-face ( font-family: 'MyWebFont'; /* Define the custom font name */ src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); /* Define where the font can be downloaded */ font-display: fallback; /* Define how the browser behaves during download */ )Nilai
The font-displayproperti menerima lima nilai:
auto(default): Mengizinkan browser menggunakan metode defaultnya untuk memuat, yang paling sering mirip denganblocknilainya.block: Menginstruksikan browser untuk menyembunyikan teks sebentar sampai font diunduh sepenuhnya. Lebih akuratnya, browser menggambar teks dengan placeholder yang tidak terlihat lalu menukarnya dengan font kustom segera setelah dimuat. Ini juga dikenal sebagai "kilatan teks tak terlihat" atau FOIT.swap: Menginstruksikan browser untuk menggunakan font fallback untuk menampilkan teks sampai font kustom diunduh sepenuhnya. Ini juga dikenal sebagai "kilatan teks tanpa gaya" atau FOUT.fallback: Bertindak sebagai kompromi antara nilaiautodanswap. Browser akan menyembunyikan teks selama sekitar 100 md dan, jika font belum diunduh, akan menggunakan teks fallback. Ini akan menukar ke font baru setelah diunduh, tetapi hanya selama periode pertukaran singkat (mungkin 3 detik).optional: Sepertifallback, nilai ini memberi tahu browser untuk menyembunyikan teks terlebih dahulu, lalu beralih ke font pengganti hingga font kustom tersedia untuk digunakan. Namun, nilai ini juga memungkinkan browser untuk menentukan apakah font kustom digunakan sama sekali, menggunakan kecepatan koneksi pengguna sebagai faktor penentu di mana koneksi yang lebih lambat cenderung tidak menerima font kustom.
Berikut cara lain untuk memikirkannya
| Periode Blok | Periode Swap | |
|---|---|---|
| blok | Pendek | Tak terbatas |
| menukar | Tidak ada | Tak terbatas |
| fallback | Sangat Pendek | Pendek |
| pilihan | Sangat Pendek | Tidak ada |
Mengapa Kami Membutuhkan font-display
Sebelum kami memiliki dukungan luas @font-face, persenjataan tipografi kami terbatas pada font lokal, di mana satu-satunya font yang tersedia adalah font yang sudah dimuat sebelumnya di komputer pengguna akhir. Kami menyebutnya font "web safe" karena browser tidak perlu mengunduh apa pun agar dapat ditampilkan.
Kemudian muncul @font-faceaturan yang memberi desainer web dan pengembang front-end kekuatan tipografi baru yang tidak seperti sebelumnya. Itu memungkinkan kami untuk mengunggah file font ke server dan menulis seperangkat aturan di stylesheet kami yang memberi nama font dan memberi tahu browser tempat mengunduh file. Itu juga memunculkan layanan seperti Google Fonts yang membawa font khusus ke massa. Akhirnya, rintangan besar yang memisahkan desain web dari desain cetak telah digulingkan!
Namun, font khusus datang (dan terus datang) dengan biaya tertentu. File font bisa jadi besar dan waktu ekstra untuk mendownload file bisa memperlambat kinerja situs, terutama untuk perangkat dengan koneksi jaringan yang lebih lambat. Biaya tambahan untuk pengguna pada paket data terbatas juga menjadi faktor.
Satu masalah khusus lainnya yang muncul dengan font kustom adalah apa yang dijuluki "flash teks tanpa gaya" atau disingkat FOUT. Browser akan secara default menampilkan font sistem sambil menunggu font khusus diunduh. Ini memungkinkan laman web memuat lebih cepat tetapi menimbulkan kekhawatiran di antara perancang web yang memandang ini sebagai pembajakan pengalaman pengguna dan salah menggambarkan desain yang dimaksudkan. Browser web saat ini umumnya menyembunyikan teks sampai font khusus diunduh, yang sekarang kita sebut sebagai "sekilas teks tak terlihat" atau FOIT.
Baik FOUT maupun FOIT tidak bagus. Kami memiliki cara untuk mengoptimalkan kinerja font khusus untuk membantu meringankan efeknya. Namun, sekarang kita harus font-displaymemberi tahu browser apakah kita lebih suka FOUT, FOIT, atau bahkan di antaranya.
Menguji Dukungan
Peringatan menarik dicatat oleh Šime Vidas:
CSS font-display adalah
@font-facedeskriptor dan bukan properti, jadi dukungannya di browser tidak dapat diuji dengan kueri fitur (@supportsaturan CSS dan API CSS.supports).
Informasi Lebih Lanjut
- CSS Font Rendering Controls Module Level 1 Spesifikasi: Draf spesifikasi untuk properti.
font-displayuntuk umum: Jeremy Wagner memperkenalkan kami ke properti di sini di CSS-Tricks.- Menggunakan
@font-face: Penjelasan lengkap tentang aturan dan praktik terbaik tentang cara menggunakannya. - System Font Stack: Cuplikan untuk mengabaikan font kustom sama sekali dan hanya mengandalkan font sistem pengguna.
- Mengontrol Performa Font dengan
font-display: Artikel bagus tentang topik oleh Google.
Dukungan Browser
Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.
Desktop
| Chrome | Firefox | YAITU | Tepi | Safari |
|---|---|---|---|---|
| 60 | 58 | Tidak | 79 | 11.1 |
Ponsel / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 11.3-11.4 |