CSS Font-Desplay: Masa Depan Rendering Font di Web

Takeaways Key

Deskriptor Font-Display CSS menyediakan pemaju dengan lebih banyak kawalan ke atas bagaimana fon dipaparkan semasa memuatkan, bertujuan untuk meningkatkan pengalaman pengguna dan prestasi yang dirasakan.
Deskriptor berfungsi dalam @font-face at-rule, dan menawarkan lima nilai yang mungkin: auto, blok, swap, swapback, dan pilihan. Setiap nilai mewakili strategi yang berbeza untuk mengendalikan pemuatan fon dan rendering.
Deskriptor beroperasi pada garis masa yang dibahagikan kepada tiga tempoh: blok, swap, dan kegagalan. Tempoh tempoh ini, yang tidak dapat ditugaskan secara eksplisit oleh pemaju, menentukan bagaimana pelayar harus membuat teks.
Walaupun deskriptor font-dinsplay CSS belum disokong sepenuhnya dalam semua pelayar, ia merupakan langkah penting ke hadapan dalam menyeragamkan tingkah laku fon di web.

Salah satu kelemahan menggunakan fon web ialah jika fon tidak tersedia pada peranti pengguna, ia mesti dimuat turun. Ini bermakna bahawa sebelum fon tersedia, penyemak imbas perlu memutuskan bagaimana untuk mengendalikan paparan mana -mana blok teks yang menggunakan fon itu. Dan ia perlu melakukannya dengan cara yang tidak memberi kesan kepada pengalaman pengguna dan prestasi yang dirasakan.

Dalam masa yang sama, pelayar telah mengadopsi beberapa strategi untuk mengurangkan masalah ini. Tetapi mereka melakukan ini dengan cara yang berbeza dan keluar dari kawalan pemaju, yang terpaksa membuat beberapa teknik dan penyelesaian untuk mengatasi isu -isu ini.

Masukkan deskriptor font-dinsplay untuk @font-face at-rule. Ciri CSS ini memperkenalkan cara untuk menyeragamkan tingkah laku ini dan memberikan lebih banyak kawalan kepada pemaju.

menggunakan font-display

Sebelum melihat secara terperinci di pelbagai ciri yang ditawarkan oleh font-desplay, mari kita pertimbangkan secara ringkas bagaimana anda boleh menggunakan ciri dalam CSS anda.

Pertama sekali, font-dinsplay bukanlah harta CSS tetapi, seperti yang dinyatakan dalam intro, ia adalah deskriptor untuk @font-face at-rule. Ini bermakna ia mesti digunakan di dalam peraturan @font-face, seperti yang ditunjukkan dalam kod berikut:

<span><span>@font-face</span> {
</span>  <span>font-family: 'Saira Condensed';
</span>  <span>src: <span>url(fonts/sairacondensed.woff2)</span> format('woff2');
</span>  <span>font-display: swap;
</span><span>}</span>

Dalam coretan ini saya menentukan nilai swap untuk fon Saira yang dipeluwap.

Kata kunci untuk semua nilai yang ada ialah:

Auto
blok
swap
Fallback
Pilihan

Nilai awal untuk font-paparan adalah auto.

Di bahagian kemudian saya akan pergi ke setiap nilai ini secara terperinci. Tetapi pertama, mari kita lihat tempoh masa yang digunakan oleh penyemak imbas untuk menentukan fon yang akan diberikan. Apabila membincangkan setiap nilai, saya akan menerangkan aspek -aspek yang berbeza dari garis masa dan bagaimana ini berkelakuan untuk setiap nilai.

garis masa font-display

pada teras ciri ini adalah konsep garis masa font-paparan. Masa pemuatan fon, bermula dari permintaannya dan berakhir dengan pemuatan atau kegagalannya yang berjaya, boleh dibahagikan kepada tiga tempoh berturut -turut yang menentukan bagaimana pelayar harus menjadikan teks itu. Ketiga -tiga tempoh ini adalah seperti berikut:

• Tempoh blok. Dalam tempoh ini, penyemak imbas membuat teks dengan yang tidak dapat dilihat font fallback. Sekiranya fon yang diminta berjaya dimuatkan, teks itu disampaikan semula dengan fon yang diminta. Fon sandaran yang tidak kelihatan bertindak sebagai pemegang tempat kosong untuk teks. Ini mengurangkan susun atur beralih apabila penanaman semula dilakukan.
• Tempoh pertukaran. Sekiranya fon yang dikehendaki belum tersedia, fon sandaran digunakan, tetapi kali ini teks dapat dilihat. Sekali lagi, jika fon pemuatan masuk, ia digunakan.
• Tempoh kegagalan. Jika fon tidak tersedia, penyemak imbas tidak menunggu, dan teks akan dipaparkan dengan fon sandaran pada tempoh lawatan halaman semasa. Perhatikan bahawa ini tidak semestinya bermakna bahawa pemuatan fon digugurkan; Sebaliknya, penyemak imbas boleh membuat keputusan untuk meneruskannya, supaya fon akan siap untuk digunakan pada lawatan halaman berturut -turut oleh pengguna yang sama.

Melaraskan tempoh tempoh tersebut membolehkan anda mengkonfigurasi strategi rendering teks tersuai. Khususnya, tempoh ini boleh runtuh ke sifar atau meluas ke tak terhingga, seperti yang saya akan menunjukkan kepada anda di bahagian berikut.

tetapi tempoh ini tidak dapat ditugaskan secara eksplisit oleh pemaju. Kemungkinan ini diperiksa pada peringkat awal spesifikasi, tetapi telah dijatuhkan. Sebaliknya, satu set nilai kata kunci yang telah ditetapkan yang boleh mengendalikan majoriti kes penggunaan disediakan, seperti yang digariskan dalam bahagian sebelumnya.

mari kita lihat bagaimana setiap kata kunci ini menguruskan proses pemuatan dan paparan fon.

Font-Display: Auto

Nilai ini memberitahu penyemak imbas untuk mengadopsi tingkah laku paparan fon lalai yang dipilih oleh penyemak imbas. Selalunya strategi ini serupa dengan nilai seterusnya, blok.

Font-Display: Block

Dengan nilai ini, selepas tempoh blok pendek (spesifikasi mencadangkan tempoh tiga saat), tempoh swap meluas ke tak terhingga. Ini bermakna bahawa dalam keadaan ini tempoh kegagalan tidak hadir.

Walaupun penyemak imbas secara ringkas menunggu fon yang diminta, ia menjadikan teks dengan fon sandaran yang tidak dapat dilihat; Selepas itu, jika fon belum tersedia, fon sandaran dibuat kelihatan; Dan setiap kali muat turun selesai, pelayar menyusun semula teks dengan font yang dikehendaki.

anda boleh menonton tingkah laku ini dalam video berikut, yang menggunakan halaman ujian mudah yang menggabungkan font web tertentu untuk tajuknya:

3
font-display: swap

Dengan nilai ini, tempoh blok runtuh hingga 0 dan tempoh swap meluas ke tak terhingga. Oleh itu, di sini juga, tempoh kegagalan hilang.

Dengan kata lain, penyemak imbas tidak menunggu fon tetapi sebaliknya segera membuat teks dengan fon sandaran; Kemudian, apabila fon tersedia, teks itu diperuntukkan semula dengannya.

mari sahkan ini:

3

font-dinsplay: fallback

Dalam video pertama ini di bawah ini, fon beban selepas lebih daripada enam saat, oleh itu ia tidak pernah ditukar dalam:
3

Dalam video seterusnya, fon beban lebih cepat, sebelum tamat tempoh swap bermula, jadi fon digunakan seperti yang diharapkan:

3
Apabila saya mula -mula membaca spesifikasi, saya dapati nama -nama yang diberikan kepada strategi paparan fon tidak begitu jelas. Ini juga ditunjukkan dalam spesifikasi itu sendiri, yang mencadangkan versi masa depan penggunaan nama yang lebih baik menggambarkan penggunaan setiap strategi yang dimaksudkan, mencadangkan alternatif berikut:

memerlukan blok

penting untuk swap
lebih baik untuk sandaran
• tetapi nilai pilihan dijangka kekal tidak berubah. Sesungguhnya nilai ini dengan baik menangkap intipati tingkah laku yang dicetuskan. Dalam kes ini, fon itu dianggap pilihan untuk rendering halaman, pada dasarnya memberitahu penyemak imbas:
Jika fon sudah tersedia, gunakannya, jika tidak, teruskan dengan fon sandaran; Font boleh siap untuk digunakan pada lawatan halaman masa depan

.

Dengan nilai ini, garis masa paparan fon mempunyai tempoh blok pendek (sekali lagi, spec mencadangkan selang waktu 100 ms) dan tempoh swap sifar. Oleh itu, tempoh kegagalan segera mengikuti tempoh blok, yang bermaksud bahawa jika fon tidak tersedia, ia tidak akan digunakan untuk tempoh lawatan halaman. Tetapi fon akhirnya boleh dimuat turun sepenuhnya di latar belakang dan oleh itu ia akan tersedia untuk rendering segera pada beban halaman masa depan.

Tetapi saya harus menunjukkan di sini bahawa, terutamanya di bawah keadaan rangkaian yang lemah, ejen pengguna bebas membatalkan atau bahkan tidak memulakan muat turun fon. Ini adalah untuk tidak memberi kesan yang tidak perlu kepada kualiti sambungan rangkaian. Oleh itu, laman web ini masih boleh digunakan tetapi fon tidak akan segera tersedia pada beban halaman masa depan.

Dalam video di bawah, halaman ujian dimuatkan tanpa membuang rangkaian. Fon dimuat turun dengan cepat, tetapi hanya selepas tempoh blok pendek, jadi teks dipaparkan dengan fon sandaran untuk semua tempoh lawatan.

3

Dalam video seterusnya, halaman tersebut dimuat semula di bawah keadaan rangkaian yang sama, tetapi kali ini dengan cache diaktifkan, untuk mensimulasikan lawatan kedua:

3

Sebelum bergerak, perhatikan tempoh yang sangat singkat sekitar 100 ms yang disyorkan untuk tempoh blok apabila menggunakan nilai sandaran dan pilihan. Ini adalah untuk membolehkan tempoh yang singkat untuk fon pemuatan cepat (atau satu pemuatan dari cache) untuk dipaparkan sebelum menggunakan fon sandaran, dengan itu mengelakkan "flash teks yang tidak terkawal", atau FOUT.

Saya benar-benar tertanya-tanya mengapa tempoh blok runtuh menjadi sifar apabila menggunakan font-paparan: swap, bukannya menggunakan selang pendek yang sama seperti pilihan. Ternyata, terdapat isu terbuka dalam repo github spec untuk membuat 'swap' menggunakan "tempoh blok kecil" yang sama seperti yang lain.

mengenai font sandaran

Dalam perbincangan di atas, beberapa kali saya menyebutkan fon sandaran. Tetapi dari mana asalnya?

Font sandaran adalah fon pertama yang terdapat dalam timbunan font yang ditakrifkan menggunakan harta keluarga font pada elemen yang dipersoalkan.

Sebagai contoh, pada halaman ujian, nilai keluarga font untuk tajuk adalah:

<span><span>@font-face</span> {
</span>  <span>font-family: 'Saira Condensed';
</span>  <span>src: <span>url(fonts/sairacondensed.woff2)</span> format('woff2');
</span>  <span>font-display: swap;
</span><span>}</span>

Ini boleh disahkan (lihat video di atas untuk pilihan), contohnya, pada mesin Windows, yang menggunakan arial sebagai font yang diberikan.

Sokongan

pada masa penulisan sokongan untuk deskriptor font-paparan kelihatan seperti berikut:

Chrome telah menyokongnya sejak versi 60
opera telah menyokongnya sejak versi 47
Ia sedang dibangunkan untuk Firefox dan telah tersedia di belakang bendera sejak versi 46.
Mengenai Safari, Status Platform WebKit melaporkan bahawa ia sedang dalam pembangunan
Tidak ada petunjuk lagi bahawa Microsoft Edge akan menyokongnya dalam masa terdekat. Terdapat tiket di laman maklum balas Microsoft Edge pemaju di mana ia mungkin untuk mengundi untuk pelaksanaan ciri ini.

sila rujuk caniuse.com untuk maklumat sokongan terkini.

Perlu diingat bahawa sokongan font-paparan tidak dapat diuji oleh pertanyaan ciri, kerana, seperti yang disebutkan di atas, ia bukan harta CSS tetapi deskriptor font. Dalam isu GitHub ini, anda akan dapati beberapa perbincangan tentang cara mengesan ciri ini dengan betul.

Sebaik sahaja ia telah dikesan bahawa font-paparan tidak disokong, beberapa strategi sandaran mungkin mungkin, tetapi ini adalah skop artikel ini. Artikel ini panduan komprehensif untuk strategi pemuatan fon oleh Zach Leatherman membentangkan tinjauan menyeluruh mengenai penyelesaian yang ada.

Penggunaan dengan Google Fonts

Anda mungkin menyedari bahawa fon yang digunakan dalam halaman demo adalah dari font Google, tetapi ia tidak dimuatkan dengan cara yang biasa, iaitu, menghubungkan ke lembaran styleshe yang disediakan oleh penyedia fon. Sebaliknya, saya hanya menyalin URL fon yang terdapat dalam lembaran styleshe itu dan menggunakan URL itu dalam peraturan font-face custom @saya. Saya terpaksa melakukan ini kerana, seperti yang dilihat di bahagian penggunaan, font-paparan mesti ditentukan di dalam peraturan font-face.

Adakah terdapat cara yang lebih baik dan lebih mesra Google? Adakah Font Google dan Font Font Pihak Ketiga yang lain akan menyokong Font-Display?

Terdapat isu terbuka pada repo Google Fonts GitHub di mana ini dibincangkan. Tambahkan 1 anda untuk menunjukkan minat anda dalam ciri ini!

Juga, patut disebutkan bahawa modul font CSS Level 4 mencadangkan penggunaan fon-display sebagai deskriptor untuk @font-feature-values, untuk membolehkan pemaju menetapkan dasar paparan untuk peraturan @font-face yang tidak secara langsung di bawah kawalan mereka. Tetapi ini belum dilaksanakan oleh mana -mana ejen pengguna.

perkataan akhir

Saya harap ini memberi anda gambaran yang baik tentang deskriptor font-dinsplay dan bagaimana ciri ini meramalkan masa depan yang kuat untuk rendering font di web.

Walaupun artikel ini tidak membincangkan kes-kes penggunaan khusus untuk strategi yang berbeza yang dilaksanakan oleh font-paparan, spesifikasi menggambarkan kes-kes penggunaan dengan beberapa contoh yang jelas, dan beberapa rujukan yang disebutkan rujukan mengenai topik ini. Oleh itu, sebagai tambahan kepada asas -asas yang saya tutupi di sini, anda akan mempunyai lebih banyak untuk melihat dalam sumber yang saya rujuk.

Soalan Lazim (Soalan Lazim) Mengenai Paparan Font CSS dan Rendering Font Web

Apakah harta font-dinsplay CSS dan mengapa penting? masih memuatkan. Harta ini sangat penting kerana ia memberi kesan yang signifikan kepada pengalaman pengguna di laman web. Sekiranya fon mengambil masa terlalu lama untuk memuatkan, ia boleh menyebabkan kelewatan dalam penyerahan teks, yang membawa kepada fenomena yang dikenali sebagai flash teks yang tidak kelihatan (FOIT) atau flash teks yang tidak disengajakan (FOUT). Dengan menggunakan harta font-paparan, pemaju dapat mengawal tingkah laku ini dan meningkatkan pengalaman pengguna secara keseluruhan. Menyediakan satu set peraturan yang menentukan bagaimana fon harus berkelakuan semasa ia memuatkan dan apabila ia gagal memuatkan. Ia menerima beberapa nilai, termasuk 'auto', 'block', 'swap', 'fallback', dan 'pilihan'. Setiap nilai ini mewakili strategi pemuatan yang berbeza, memberikan pemaju fleksibiliti untuk memilih yang paling sesuai dengan keperluan mereka. Nilai paparan mewakili strategi pemuatan fon yang berbeza. 'Auto' meninggalkan tingkah laku pemuatan sehingga penyemak imbas. 'Blok' memberikan fon tempoh blok pendek dan tempoh swap tak terhingga. 'Swap' memberikan fon tempoh blok sifar saat dan tempoh swap tak terhingga. 'Fallback' memberikan fon tempoh blok yang sangat singkat dan tempoh swap pendek. 'Pilihan' memberikan fon tempoh blok sifar saat dan tempoh swap sifar.

Bagaimana saya boleh menggunakan harta font-paparan CSS dalam kod saya? Berikut adalah contoh:

@font-face {
font-family: 'myfont';
src: url ('myfont.woff2') format ('woff2'); -display: swap; }
Dalam contoh ini, harta font-paparan ditetapkan untuk 'swap', yang bermaksud teks akan dipaparkan dengan segera dengan font sentuhan jika 'myfont' tidak tersedia.

Apakah kesan harta font-paparan CSS pada prestasi laman web? Dengan mengawal bagaimana fon dipaparkan semasa proses pemuatan, ia dapat membantu mencegah kelewatan dalam rendering teks, dengan itu meningkatkan kelajuan pemuatan yang dirasakan di laman web. Ia juga boleh membantu mengelakkan peralihan susun atur yang disebabkan oleh fon pemuatan lewat, yang membawa kepada pengalaman pengguna yang lebih lancar. Fout)?
Harta Font-Display CSS secara langsung menangani isu-isu Foit dan Fout. Dengan membenarkan pemaju mengawal tingkah laku pemuatan fon, ia dapat menghalang teks daripada menjadi tidak kelihatan atau tidak terkawal semasa proses pemuatan. Sebagai contoh, menetapkan harta font-paparan untuk 'swap' boleh menghilangkan FOIT dengan memaparkan teks dengan segera dengan font sandaran. 🎜> Beberapa amalan terbaik untuk menggunakan harta font-paparan CSS termasuk memilih nilai yang tepat berdasarkan keperluan anda dan menguji tingkah laku pemuatan pada pelayar dan keadaan rangkaian yang berbeza. Ia juga disyorkan untuk menggunakan fon sandaran yang sepadan dengan metrik fon tersuai untuk meminimumkan perubahan susun atur.
Ya, anda boleh menggunakan harta font-paparan CSS dengan fon web yang dihoskan pada perkhidmatan pihak ketiga. Walau bagaimanapun, penting untuk diperhatikan bahawa tidak semua perkhidmatan menyokong ciri ini. Anda harus menyemak dokumentasi atau hubungi pembekal perkhidmatan untuk maklumat lanjut. Paparan harta adalah bahawa ia tidak disokong sepenuhnya dalam semua pelayar. Sebagai contoh, Internet Explorer dan beberapa versi lama pelayar lain tidak menyokong ciri ini. Di samping itu, nilai 'pilihan' boleh menyebabkan fon tersuai dilangkau sepenuhnya dalam beberapa kes, yang boleh menjejaskan konsistensi visual laman web anda.

Bagaimanakah sifat font-paparan CSS sesuai dengan strategi prestasi web yang komprehensif? Walaupun ia dapat membantu meningkatkan kelajuan pemuatan yang dirasakan dan mencegah perubahan susun atur, ia harus digunakan bersamaan dengan teknik pengoptimuman prestasi lain, seperti meminimumkan saiz fail CSS dan JavaScript anda, mengoptimumkan imej, dan menggunakan rangkaian penghantaran kandungan (CDN) .

Atas ialah kandungan terperinci CSS Font-Desplay: Masa Depan Rendering Font di Web. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!