web font loading recipes

Web-Font-Loading-Recipes

Banyak demo untuk berbagai strategi pemuatan font web. Beberapa di antaranya termasuk dalam panduan komprehensif untuk strategi pemuatan font, beberapa di antaranya lebih eksperimental .

Demo di-host di https://www.zachleat.com/web-fonts/demos/

Daftar isi

• Metode yang disarankan
• Peningkatan lebih lanjut
• Eksperimen sedang berlangsung
• Tidak direkomendasikan tetapi termasuk untuk anak cucu
• Anti-pola dan metode yang sudah usang
• Eksperimen Gagal

Metode yang disarankan

Karena font web adalah peningkatan progresif dan dengan meningkatnya dukungan untuk CSS Font Loading API, kita dapat menantikan waktu di mana kita tidak perlu menyambungkan polyfill ke header (untuk pemuatan font yang bahkan lebih cepat). Resep API pemuatan font CSS yang disederhanakan adalah default, tetapi versi polyfilled disertakan untuk dukungan browser yang lebih luas - mungkin hanya versi polyfilled yang akan menampilkan font web di Internet Explorer dan Browser Web Edge (yang tidak memiliki dukungan untuk CSS Font Loading API).

font-display: swap

• CSS : @font-face Descriptor
• Kode
• Baca selengkapnya
• Demo ** (4 font web)

preload

• HTML : Tag <link>
• Kode
• Baca selengkapnya
• Demo ** (4 Font Web - 1 dimuat sebelumnya)

font-display: swap dengan preload

• Html : <link> tag dan css : @font-face descriptor
• Kode
• Baca lebih lanjut tentang font-display dan preload
• Demo ** (4 Font Web - 1 dimuat sebelumnya)

Fout dengan kelas

• JavaScript : CSS Font Memuat API
• Kode
• Baca selengkapnya
• Demo (4 font web)
• atau menggunakan polyfill - Demo (4 font web)

Fout

Mirip dengan yang di atas, tetapi tanpa menggunakan kelas - hanya menggunakan API memuat font CSS. Ini tidak memerlukan modifikasi CSS, menyuntikkan font web menggunakan JS secara terprogram. Saya pertama kali melihat metode ini di Buku Pegangan Webfont dari @Bramstein.

• JavaScript : CSS Font Memuat API
• Kode
• Demo (4 font web)
• Terkait: .style.fontFamily Metode (hanya bekerja dengan baik dengan satu keluarga per halaman), pertama kali melihat ini dalam tweet dari @simevidas

Foft

Dua muatan tahap, menggunakan satu file font Romawi di tahap pertama (dengan sintesis font).

• JavaScript : CSS Font Memuat API
• Kode
• Baca selengkapnya
• Demo (5 font web, dua sama - tetapi hanya dimuat sekali)
• atau menggunakan polyfill - Demo (4 font web)

Foft kritis

• JavaScript : CSS Font Memuat API
• Kode
• Baca selengkapnya
• Demo (5 Web Fonts - 1 Subset)
• atau menggunakan polyfill - Demo (5 font web - 1 subset)

FOFT KRITIS dengan data URI

• JavaScript : CSS Font Memuat API
• Kode
• Baca selengkapnya
• Demo (5 Web Fonts - 1 Subset Inline Data URI)
• atau menggunakan polyfill - Demo (5 Web Fonts - 1 Subset Inline Data URI)

FOFT KRITIS dengan preload

• HTML : <link> Tag dan JavaScript : CSS Font Memuat API
• Kode
• Baca selengkapnya
• Demo (5 Web Fonts - 1 Subset)
• atau menggunakan polyfill - Demo (5 font web - 1 subset)

Metode ebay

• JavaScript : CSS Font Memuat API dan FontFaceObServer Polyfill
• Kode: HTML dan JavaScript yang malas
• Tiru font-display: optional dengan JavaScript.
  • Dicatat bahwa malas memuat font memuat polyfill hanya jika css font memuat API tidak didukung
• Baca lebih lanjut di strategi pemuatan font eBay.
• Demo (4 font web) (polyfill malas dimuat saat css font memuat API tidak didukung)

"The Compromise": Critical Foof dengan preload , dengan font-font font-display: optional

• Html : <link> tag dan javascript : css font memuat API dan fontfaceoBserver polyfill
• Kode: HTML dan JavaScript yang malas
• Baca selengkapnya
  • Terinspirasi oleh metode eBay di atas.
• Demo (5 Web Fonts - 1 subset) (Polyfill malas dimuat saat CSS Font Memuat API tidak didukung)
• Saat ini digunakan di zachleat.com dan smashingmagazine.com

Peningkatan lebih lanjut

Ini tidak harus strategi pemuatan font sendiri tetapi mereka adalah peningkatan tambahan yang dapat Anda layer di atas dan berpasangan dengan strategi yang ada.

API Informasi Jaringan

Pilih keluar dari font web pada kecepatan koneksi lambat.

• Kode (ditampilkan dengan pendekatan fout)
• Demo
• Posting blog terkait: Haruskah saya menggunakan JavaScript untuk memuat font web saya?

Preferensi pengguna prefers-reduced-motion

Pilih keluar dari font web saat pengguna telah diaktifkan Reduce Motion .

• Kode (ditampilkan dengan pendekatan fout)
• Demo
• Posting blog terkait: Haruskah saya menggunakan JavaScript untuk memuat font web saya?

Preferensi Pengguna save-data

Pilih keluar dari font web saat pengguna telah mengaktifkan mode Data Saver .

• Kode (ditampilkan dengan pendekatan fout)
• Demo
• Posting blog terkait: Haruskah saya menggunakan JavaScript untuk memuat font web saya?

Eksperimen sedang berlangsung

Anda mungkin akan melihat posting blog tentang ini di beberapa titik.

• Font web yang kompatibel metrik
  • Tunjukkan bagaimana font dapat terlihat tanpa fout reflow jika mereka kompatibel dengan metrik.
• Fout Metric Pencocokan dengan font variabel
  • Pengurangan fout reflow (Kurangi gerakan teks pada render font web)
  • Terkait: pencocokan gaya font dari @notwaldorf

Tidak direkomendasikan tetapi termasuk untuk anak cucu

font-display: optional

• Sedikit kasar untuk meletakkan ini di bagian yang tidak direkomendasikan tetapi saya suka font web saya pada kunjungan cache kosong?
• Kode
• Demo ** (4 font web)

Font Sistem

Ayo. ?

• Kode
• Dokumentasi
• Demo (0 font web)

Font web yang tidak resmi

• Kode
• Dokumentasi
• Demo ** (4 font web)

Font Web yang tidak resmi, hanya Woff2 (memotong mustard)

Browser lama digunakan untuk membuat foit tanpa batas waktu, yang dalam praktiknya membuat font web menjadi satu titik kegagalan. Menggunakan WOFF2 hanya memotong mustard ke browser modern yang memiliki batas waktu FOIT tiga detik untuk font web. Kami tidak terlihat teks di sini, tetapi pendekatan ini layak disebutkan.

• Kode
• Demo ** (4 font web)

Font web palsu tanpa basa -basi

font-synthesis bukanlah produk akhir yang baik.

• Kode
• Demo ** (1 Font Web) : Varian tebal dan miring ditampilkan menggunakan sintesis font

Anti-pola dan metode yang sudah usang

️ Inline Data URI

• Kode
• Baca selengkapnya
• Demo (4 font web)

️ Data asinkron URI

• Kode
• Baca selengkapnya
• Demo (4 font web)

️ <style> suntikan

Apa pun yang menggunakan JavaScript untuk menyuntikkan <style> baru dengan blok @font-face di dalamnya. Biaya mengecat ulang yang sangat buruk - menghindari ini. Ini digunakan dalam metode URI data asinkron di atas tetapi juga umum dalam metode kinerja yang lebih buruk juga.

️ font-display: optional dan preload

• Kode
• Baca lebih lanjut: preload dengan font-display: optional adalah anti-pola
• Demo ** (4 font web)

️ FOFT hanya menggunakan font-display (mencampur nilai font-display di seluruh font-family )

Metode ini saat ini tidak memiliki dukungan lintas-browser. Saya berharap ini akan berubah - pelajari lebih banyak.

• Kode
• Demo ** (4 font web - 1 swap / 3 optional )

Eksperimen Gagal

CSS asinkron

Ini adalah hal umum yang dicoba orang - mereka secara tidak sinkron memuat CSS (dan hanya CSS). Heck, saya menggunakan perilaku ini sebelum saya mulai mempelajari pemuatan font web.

• Gagal : Malas Memuat CSS hanya menunda awal foit. Itu tidak mencegahnya.
• Baca lebih lanjut di Font Web Lazy Loading mungkin bukan yang Anda inginkan
• Kode (Pelajari lebih lanjut tentang CSS asinkron)
• Demo (4 font web)

@supports dan font-display

• Alasan mencoba:
  • mungkin menyenangkan hanya menggunakan font web jika Anda bisa fout dengan font-display
  • mungkin menyenangkan memiliki fout dengan kelas jika font-display tidak didukung (dan bekerja dengan baik tanpa dependensi JS)
• Gagal : @supports tidak berfungsi dengan deskriptor wajah font.
• Kode
• Demo

font-family Stack

• Masukkan dua atau lebih font-family dalam satu tumpukan font-family .

• Gagal : Algoritma pencocokan font memilih font web pertama yang cocok dan berupaya memuatnya (mengabaikan keluarga font web berikutnya). Bahkan jika Anda preload tahap pertama subset, itu akan bertukar karena prioritas pesanan font-family .

• Kode

• Demo

• UPDATE : Meskipun Anda dapat mengurangi masalah di atas dengan font-display , mungkin memodifikasi urutan stack font-family dan pemesanan blok @font-face , masih ada masalah dengan menghapus font web subset yang tidak perlu dari halaman setelah versi yang lebih besar dimuat. Fitur font yang terjadi dengan mesin terbang yang melintasi batas -batas file font ini akan rusak (kerning, ligatures, et cetera). Terkait, Anda tidak dapat menghapus objek FontFace berpasangan CSS menggunakan CSS Font Loading API (per spesifikasi).

---

** Perhatikan bahwa metode ini akan fout di Internet Explorer and Edge dengan memanfaatkan perilaku pemuatan font default mereka.