Masa untuk screencast berpasangan yang lain! Kali ini saya menggunakan Zach Leatherman, dari Filament Group. Zach telah melakukan banyak penyelidikan, penulisan, dan pembicaraan mengenai pemuatan fon web beberapa tahun kebelakangan. Dia mempunyai panduan lengkap tentangnya!
Terdapat beberapa masalah dengan cara lalai bahawa fon khusus dimuat. Seperti dalam, hanya menghubungkan fon di beberapa CSS melalui @ font-face. Walaupun cara Google Font menyediakan anda untuk menggunakan fon mereka, Zach memanggil anti-corak (akhirnya itu hanya vanilla @ font-face). Pelayar yang berbeza melakukan perkara yang berbeza dengan @ font-face. Sebagai contoh, beberapa versi Safari membuat jenis yang ditetapkan dalam fon khusus yang tidak dapat dilihat sehingga fon dimuat, tetapi tidak mempunyai masa tamat, jadi jika fon gagal dengan sebab apa pun, anda mungkin berada dalam senario terburuk: teks yang tidak dapat dilihat selama-lamanya laman web tersebut.
Anda tidak mempunyai banyak kawalan mengenai bagaimana font @ font-face dimuat, melainkan anda mengambil masalah dengan tangan anda sendiri. Itu bermaksud perkara-perkara seperti: melekatkan fon, menyusun fon (sama ada dengan set glif "kritikal", atau sekurang-kurangnya mengurangkan glyph ke bahasa yang digunakan), menggunakan pemuat fon untuk menentukan kapan fon memuat dan mengubah kelas untuk menggunakannya . Yang terakhir sangat menarik. Semasa menjalankan kawalan terhadap pemuatan fon, Anda tidak hanya harus berurusan dengan kapan / bagaimana penyemak imbas memuat CSS yang berisi @ font-face, tetapi juga kapan / bagaimana penyemak imbas menemui elemen teks yang diberitahu untuk menggunakan fon tersebut. Fon yang tidak digunakan tidak dimuat turun. Jadi kadang-kadang prosedurnya adalah memaksa mereka memuat turun, tunggu sehingga mereka memuat turun, kemudian gunakan kelas untuk benar-benar menggunakannya.
Beberapa alat yang kami lihat:
- Firefox DevTools lebih baik untuk melihat fon yang digunakan
- Menetapkan fon boleh dilakukan di penjana Font Squirrel atau Font Prep.
- Glyph apa yang anda subset? Uji apa yang anda perlukan di URL tertentu dengan Glyphhanger.
- Bagaimana anda tahu bila penyemak imbas menggunakan tebal / miring palsu? pas palsu.