Paparan fon - Trik CSS

Anonim

Yang font-displaymentakrifkan harta bagaimana fail font dimuatkan dan dipaparkan oleh pelayar. Ini diterapkan pada @font-faceaturan yang menentukan font khusus dalam lembar gaya.

@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-displayharta menerima lima nilai:

  • auto(lalai): Membolehkan penyemak imbas menggunakan kaedah lalai untuk memuatkan, yang paling sering serupa dengan blocknilainya.
  • block: Mengarahkan penyemak imbas menyembunyikan teks secara ringkas sehingga fonnya dimuat turun sepenuhnya. Lebih tepat lagi, penyemak imbas menarik teks dengan placeholder yang tidak dapat dilihat kemudian menukarnya dengan wajah fon tersuai sebaik sahaja memuatkan. Ini juga dikenali sebagai "kilatan teks yang tidak kelihatan" atau FOIT.
  • swap: Mengarahkan penyemak imbas untuk menggunakan fon pengganti untuk memaparkan teks sehingga fon tersuai telah dimuat turun sepenuhnya. Ini juga dikenali sebagai "kilatan teks yang tidak bergaya" atau FOUT.
  • fallback: Bertindak sebagai kompromi antara autodan swapnilai. Penyemak imbas akan menyembunyikan teks selama kira-kira 100ms dan, jika fon belum dimuat turun, akan menggunakan teks pengganti. Ia akan bertukar ke fon baru setelah dimuat, tetapi hanya dalam jangka masa pertukaran pendek (mungkin 3 saat).
  • optional: Seperti fallback, nilai ini memberitahu penyemak imbas untuk menyembunyikan teks pada mulanya, kemudian beralih ke fon pengganti sehingga fon khusus tersedia untuk digunakan. Walau bagaimanapun, nilai ini juga membolehkan penyemak imbas untuk menentukan sama ada fon kustom bahkan digunakan sama sekali, menggunakan kelajuan sambungan pengguna sebagai faktor penentu di mana sambungan yang lebih lambat cenderung untuk menerima fon khusus.

Inilah kaedah lain untuk memikirkannya

Tempoh Sekatan Tempoh Tukar
sekatan Pendek Tidak terhingga
pertukaran Tiada Tidak terhingga
jatuh balik Sangat Pendek Pendek
pilihan Sangat Pendek Tiada

Mengapa Kita Perlu font-display

Sebelum kami mendapat sokongan yang meluas @font-face, gudang tipografi kami hanya terbatas pada fon tempatan, di mana satu-satunya fon yang tersedia adalah fon yang dimuat terlebih dahulu di komputer pengguna akhir. Kami memanggil fon "selamat web" ini kerana penyemak imbas tidak perlu memuat turun apa-apa agar dapat diberikan.

Kemudian datanglah @font-faceperaturan yang memberikan kekuatan tipografi kepada pereka web dan pemaju front-end tidak seperti sebelumnya. Ini membolehkan kami memuat naik fail fon ke pelayan dan menulis sekumpulan peraturan di lembaran gaya kami yang menamakan font dan memberitahu penyemak imbas di mana memuat turun fail. Ini juga menimbulkan perkhidmatan seperti Google Font yang membawa fon khusus kepada orang ramai. Akhirnya, rintangan utama yang memisahkan reka bentuk web dari reka bentuk cetak telah digulingkan!

Walau bagaimanapun, fon khas datang (dan terus datang) dengan kos. Fail fon boleh menjadi besar dan masa tambahan untuk memuat turun fail dapat memperlambat prestasi laman web, terutama untuk peranti pada sambungan rangkaian yang lebih lambat. Kos tambahan untuk pengguna dalam rancangan data terhad juga menjadi faktor.

Satu lagi keprihatinan lain yang muncul dengan fon khusus adalah apa yang dijuluki "kilat teks yang tidak bergaya" atau Singkatnya FOUT. Penyemak imbas secara lalai menunjukkan fon sistem sementara menunggu fon khusus dimuat turun. Ini membolehkan laman web dimuat dengan lebih cepat tetapi menimbulkan kebimbangan di kalangan pereka web yang melihatnya sebagai merampas pengalaman pengguna dan menyalahgunakan reka bentuk yang dimaksudkan. Penyemak imbas web hari ini umumnya menyembunyikan teks sehingga fon tersuai dimuat turun, yang sekarang kita sebut sebagai "kilat teks tidak kelihatan" atau FOIT.

Baik FOUT ataupun FOIT adalah hebat. Kami mempunyai cara untuk mengoptimumkan prestasi fon khusus untuk membantu mengurangkan kesannya. Walau bagaimanapun, sekarang kita harus font-displaymemberitahu penyemak imbas sama ada kita lebih suka FOUT, FOIT, atau bahkan sesuatu di antaranya.

Menguji Sokongan

Perhatian menarik yang dicatat oleh Šime Vidas:

Paparan fon CSS adalah @font-facedeskriptor dan bukan sifat, jadi sokongannya dalam penyemak imbas tidak dapat diuji dengan pertanyaan ciri ( @supportsaturan CSS dan CSS.support API).

Maklumat lanjut

  • Modul Kawalan Font Rendering CSS Tahap 1 Spesifikasi: Draf spesifikasi untuk harta tanah.
  • font-display untuk orang ramai: Jeremy Wagner memperkenalkan kami di tempat ini di CSS-Tricks.
  • Menggunakan @font-face: Penjelasan menyeluruh mengenai peraturan dan amalan terbaik untuk menggunakannya.
  • Sistem Font Stack: Coretan untuk melepaskan fon tersuai sama sekali dan hanya bergantung pada fon sistem pengguna.
  • Mengawal Prestasi Font dengan font-display: Penulisan topik yang baik oleh Google.

Sokongan Penyemak Imbas

Data sokongan penyemak imbas ini berasal dari Caniuse, yang mempunyai lebih terperinci. Nombor menunjukkan bahawa penyemak imbas menyokong ciri pada versi dan ke atas.

Desktop

Chrome Firefox IE Hujung Safari
60 58 Tidak 79 11.1

Mudah Alih / Tablet

Android Chrome Android Firefox Android Safari iOS
88 85 81 11.3-11.4