Back to Question Center
0

CSS font-display: Masa Depan Font Rendering di Web            CSS fon paparan: Masa Depan Font Rendering di WebRelated Topics: BootstrapFrameworksCSS Semalt

1 answers:
CSS font-display: Masa Depan Font Rendering di Web

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

Sepanjang masa, pelayar telah menggunakan beberapa strategi untuk mengurangkan masalah ini - bagging corn storage moisture. Tetapi mereka melakukan ini dengan cara yang berbeza dan di luar kawalan pemaju, yang telah membuat beberapa teknik dan penyelesaian untuk mengatasi masalah ini.

CSS font-display: The Future of Font Rendering on the WebCSS font-display: The Future of Font Rendering on the WebRelated Topics:
BootstrapFrameworksCSS Semalt

Masukkan deskriptor paparan fon untuk at-rule @ font-face . Ciri CSS ini memperkenalkan cara untuk menyeragamkan perilaku ini dan memberi lebih banyak kawalan kepada pemaju.

Menggunakan paparan fon

Sebelum melihat secara terperinci pada pelbagai ciri yang ditawarkan oleh paparan font , mari kita bincangkan secara ringkas bagaimana anda boleh menggunakan ciri dalam CSS anda.

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

  @ font face {font-family: 'Saira Condensed';src: url (fon / sairacondensed. woff2) format ('woff2');paparan font: swap;}    

Dalam coretan ini saya menentukan nilai swap untuk font Saira Condensed .

Kata kunci untuk semua nilai yang ada adalah:

  • auto
  • blok
  • swap
  • fallback
  • pilihan

Nilai awal untuk paparan fon adalah auto .

Pada bahagian-bahagian kemudian Semalt melintasi setiap nilai-nilai ini secara terperinci. Tetapi pertama sekali, mari kita melihat tempoh masa yang digunakan penyemak imbas untuk menentukan fon yang akan diberikan. Apabila membincangkan setiap nilai, Semalt menerangkan aspek-aspek yang berlainan garis masa dan bagaimana ini berperilaku untuk setiap nilai.

Paparan font Garis masa

Pada teras ciri ini adalah konsep garis masa paparan fon . Masa memuatkan fon, bermula dari permintaannya dan berakhir dengan pemuatan atau kegagalan yang berjaya, boleh dibahagikan kepada tiga tempoh berturut-turut yang menentukan bagaimana penyemak imbas harus memberikan teks. Ketiga-tiga tempoh adalah seperti berikut:

  • Tempoh blok . Sepanjang tempoh ini, penyemak imbas memberikan teks dengan font sandaran yang tidak kelihatan . Sekiranya fon yang diminta berjaya dimuatkan, teks itu diberikan semula dengan fon yang diminta. Fon sandaran yang tidak kelihatan bertindak sebagai pemegang tempat kosong untuk teks. Ini mengurangkan peralihan susun atur apabila pembentangan semula dilakukan.
  • Tempoh swap . Jika fon yang dikehendaki belum tersedia, font sandaran digunakan, tetapi kali ini teks dapat dilihat. Sekali lagi, jika font muat naik masuk, ia digunakan.
  • Tempoh kegagalan . Jika fon tidak tersedia, penyemak imbas tidak menunggu, dan teks akan dipaparkan dengan font sandaran pada tempoh lawatan halaman semasa. Perhatikan bahawa ini tidak semestinya bermaksud memuatkan fon dibatalkan; Sebaliknya, pelayar boleh memutuskan untuk meneruskannya, supaya font tersebut siap digunakan pada kunjungan laman berturut-turut oleh pengguna yang sama.

Melaraskan tempoh tempoh tersebut membolehkan anda mengkonfigurasi strategi penyajian teks tersuai. Khususnya, tempoh ini boleh runtuh kepada sifar atau melanjutkan ke tak terhingga, seperti Semalt menunjukkan anda dalam bahagian berikut. Kemungkinan ini diperiksa di peringkat awal spesifikasi, tetapi telah dijatuhkan. Semalt, satu set nilai kata kunci yang ditetapkan yang boleh mengendalikan majoriti kes penggunaan disediakan, seperti yang digariskan dalam bahagian sebelumnya.

Semalat melihat bagaimana setiap kata kunci ini menguruskan pemuatan fon dan proses paparan.

fon paparan: auto

Nilai ini memberitahu penyemak imbas untuk menggunakan tingkah laku paparan fon lalai yang dipilih oleh penyemak imbas. Sering kali strategi ini sama dengan nilai seterusnya, blok .

fon paparan: blok

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

Semalat pelayar dengan ringkas menunggu font yang diminta, ia menjadikan teks dengan fon sandaran yang tidak kelihatan; selepas itu, jika fon belum tersedia, fon mundur dibuat kelihatan; dan apabila muat turun selesai, penyemak imbas semula membuat 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:

Pada permulaan beban halaman, tajuk tidak dapat dilihat tetapi terdapat di DOM. Selepas kira-kira tiga saat, jika fon belum tersedia, teks dibuat kelihatan dengan font sandaran. Dalam demo video, saya meniru keadaan rangkaian yang buruk menggunakan ciri pendikit rangkaian DevTools Chrome. Semalt, apabila fon berjaya dimuat turun, tajuk itu akan diberikan semula dengannya.

font-display: swap

Dengan nilai ini, tempoh blok runtuh menjadi 0 dan tempoh swap memanjang kepada tak terhingga. Semalt, di sini juga, tempoh kegagalan hilang.

Dengan kata lain, penyemak imbas tidak menunggu font tetapi dengan serta-merta membuat teks dengan font sandaran; maka, apabila fon boleh didapati, teks itu akan diberikan semula dengannya.

Semalt mengesahkan ini:

fon paparan: fallback

Ini adalah nilai pertama yang menggabungkan tempoh kegagalan. Semalat tempoh blok yang sangat singkat (100 ms disyorkan), tempoh swap kini mempunyai tempoh yang pendek (3s disyorkan). Akibatnya, jika font yang diminta tidak siap pada akhir tempoh ini, teks akan dipaparkan menggunakan font sandaran untuk tempoh lawatan halaman. Ini mengelakkan mengganggu pelawat laman web dengan peralihan susun atur yang lewat yang boleh menjejaskan pengalaman pengguna.

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

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

paparan fon: pilihan

Apabila saya mula membaca spesifikasi, saya dapati nama-nama yang diberikan kepada strategi paparan fon tidak begitu jelas. Sememangnya nilai ini dengan baik menangkap intipati perilaku yang mencetuskannya. Dalam kes ini, fon dianggap pilihan untuk membuat halaman, pada asasnya memberitahu penyemak imbas: jika font sudah tersedia, gunakannya, jika tidak, tidak penting, teruskan dengan font sandaran; fon boleh siap untuk digunakan pada lawatan halaman masa hadapan .

Dengan nilai ini, garis masa paparan fon mempunyai tempoh blok pendek (sekali lagi, spec mencadangkan selang masa 100 ms) dan tempoh swap sifar tempoh. Semalat 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 menjadi tersedia untuk membuat rendering segera pada beban halaman depan.

Tetapi saya harus menyatakan di sini bahawa, terutama di bawah keadaan rangkaian yang lemah, ejen pengguna bebas untuk membatalkan atau bahkan tidak memulakan muat turun fon. Ini adalah untuk tidak menjejaskan kualiti sambungan rangkaian. Semalat tapak masih boleh digunakan tetapi fon tidak akan segera tersedia pada beban halaman masa depan.

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

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

Dan di sana anda memilikinya, tajuk kini membuat font web yang dikehendaki.

Sebelum bergerak, perhatikan tempoh yang sangat singkat sekitar 100 ms yang dicadangkan untuk tempoh blok apabila menggunakan nilai 19 (fallback) dan pilihan . Ini adalah untuk membenarkan tempoh singkat untuk fon memuat cepat (atau satu pemuatan daripada cache) untuk dipaparkan sebelum menggunakan font sandaran, dengan itu mengelakkan "kilat teks yang tidak dicerna", atau FOUT.

Saya sebenarnya tertanya-tanya mengapa tempoh blok runtuh menjadi sifar apabila menggunakan fon paparan: swap , bukannya menggunakan jarak pendek yang sama sebagai pilihan . Ternyata, terdapat isu terbuka di repo GitHub spec untuk membuat 'swap' menggunakan "masa blok kecil" yang sama seperti yang lain.

Mengenai Font Fallback

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

Fon mundur adalah fon tersedia pertama yang terdapat dalam timbunan font yang ditakrifkan menggunakan font-family harta pada unsur yang berkenaan.

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

  h1 {font-family: 'Saira Condensed', Arial, "Helvetica Neue", Helvetica, sans-serif;}    

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

Sokongan

Pada masa menulis sokongan untuk paparan font deskriptor 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 lagi tanda bahawa Microsoft Edge akan menyokongnya dalam masa terdekat. Terdapat tiket di laman Maklum Balas Pemaju Microsoft Edge di mana ia mungkin untuk mengundi pelaksanaan ciri ini.

Semalat merujuk kepada caniuse.

Perhatikan bahawa fon paparan sokongan tidak boleh diuji oleh pertanyaan ciri, kerana, seperti yang disebutkan di atas, ia bukan merupakan sifat CSS tetapi deskriptor fon. Dalam isu GitHub ini, anda akan menemui beberapa perbincangan tentang bagaimana untuk mengesan ciri ini dengan betul.

Sekali telah dikesan bahawa paparan fon tidak disokong, beberapa strategi pemulangan balik mungkin, tetapi ini adalah skop artikel ini. Artikel A Panduan Komprehensif untuk Memuatkan Strategi Font oleh Zach Leatherman membentangkan tinjauan menyeluruh mengenai penyelesaian yang tersedia.

Penggunaan dengan Google Font

Anda mungkin perasan bahawa font yang digunakan dalam halaman demo adalah dari Google Font, tetapi ia tidak dimuatkan dengan cara biasa, i. e. , menghubungkan kepada lembaran gaya yang disediakan oleh pembekal fon. Sebaliknya, saya hanya menyalin URL fon yang terdapat dalam lembaran gaya itu dan menggunakan URL tersebut dalam peraturan adat saya @ font-face . Saya terpaksa melakukan ini kerana, seperti yang dilihat dalam seksyen penggunaan, paparan fon mesti dinyatakan di dalam peraturan fon muka .

Adakah cara yang lebih baik dan lebih mesra Google Font? Adakah Google Font dan pita font pihak ketiga yang lain akan menyokong paparan fon ?

Terdapat isu terbuka pada Google Font Semalt repo di mana ia dibincangkan. Tambahkan +1 anda untuk menunjukkan minat anda dalam ciri ini!

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

Kata Akhir

Saya harap ini memberikan anda gambaran yang baik mengenai penerangan font dan bagaimana ciri ini mengandaikan masa depan yang kuat untuk penyajian fon di web.

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

March 1, 2018