Mengoptimumkan fon web untuk prestasi: keadaan seni

Artikel ini adalah sumbangan perkongsian SiteGround. Terima kasih kerana menyokong penaja kami.

Enam puluh tujuh peratus laman web kini menggunakan fon web tersuai. Walau bagaimanapun, penggunaan yang meluas ini memberikan cabaran prestasi dan pengalaman pengguna. Artikel ini meneroka perangkap biasa dalam pelaksanaan font web dan menawarkan penyelesaian, termasuk penyelesaian yang ditetapkan dan piawaian masa depan.

Mata utama:

fon web tersuai, yang digunakan pada 67% laman web, boleh memberi kesan negatif terhadap prestasi dan pengalaman pengguna kerana saiz dan masa pemuatan mereka, yang berpotensi menyebabkan flash teks yang tidak kelihatan (FOIT).
• Mengoptimumkan fon tersuai melibatkan meminimumkan typefaces, menggunakan format serasi penyemak imbas (mengutamakan WOFF2), memuatkan hanya gaya yang diperlukan, dan mengehadkan set aksara.
• Untuk memerangi FOIT, pertimbangkan untuk menggunakan fon sistem, menggunakan loader font web untuk memuatkan asynchronous, atau memanfaatkan API pemuatan fon CSS untuk kawalan berbutir.
• harta CSS
menawarkan pengurusan font lanjutan, walaupun sokongan penyemak imbas tetap tidak lengkap.
• font-display Walaupun flash teks yang tidak terkawal (FOUT) mungkin berterusan, impaknya dapat dikurangkan dengan menyelaraskan metrik fon fallback (X-Height dan Lebar) dengan font adat.

Alasan fon web tersuai:

Pelawat laman web mengutamakan kandungan. Oleh itu, tipografi yang luar biasa adalah penting untuk kebolehbacaan, keterbacaan, dan identiti jenama. Fon Web Custom-Fonts tidak dipasang pada peranti pengguna-Deliver Superior Typographic Design. Walaupun peraturan CSS

telah membolehkan penggunaan yang meluas, saiz fail fon yang wujud boleh memberi kesan kepada prestasi tapak. Pemuatan fon yang cekap adalah yang paling utama.

@font-face

Memahami Flash of Text Invisible (FOIT):

Kaedah biasa menggunakan fon tersuai -menentukan mereka melalui CSS

dan bergantung pada tingkah laku penyemak imbas lalai -adalah suboptimal. Pelayar sering melambatkan pemuatan fon sehingga parsing CSS selesai. Tambahan pula, seperti yang dinyatakan oleh Zach Leatherman, muat turun fon memerlukan syarat tertentu:

@font-face

elemen HTML menggunakan

yang ditentukan.
• font-family Dalam penyemak imbas webkit dan berkelip, elemen tidak boleh kosong.
• Untuk penyemak imbas yang menyokong deskriptor pelbagai unicode, kandungan mesti sepadan dengan julat yang ditentukan.
Muat turun yang ditangguhkan ini sering menyebabkan FOIT: Teks yang tidak dapat dilihat sehingga beban fon. Pengendalian penyemak imbas FOIT bervariasi:

• Blink dan Firefox Gunakan masa tamat tiga saat; Sekiranya fon tidak dimuatkan, fon sandaran dipaparkan, berpotensi membawa kepada Fout (Flash of Unstyled Text).
• Safari, pelayar lalai Android, dan BlackBerry tidak memaparkan teks sehingga beban fon, meninggalkan pengguna dengan ruang kosong.
• IE/Edge secara langsung memaparkan font sandaran, pendekatan yang lebih mesra pengguna.

Walaupun Fout kurang mengganggu daripada Foit, idealnya, kedua -duanya harus dielakkan. Walau bagaimanapun, ramai pakar menganggap FOUT lebih baik untuk FOIT.

Mengoptimumkan fail font tersuai:

Beberapa strategi meminimumkan saiz fail fon:

1. meminimumkan typefaces: Gunakan sebilangan kecil fon yang dipilih dengan teliti.

Format yang serasi dengan penyemak imbas:
2. mengutamakan Woff2, jatuh ke Woff. Contoh:

   @font-face {
     font-family: 'Open Sans';
     src: local('Open Sans'), local('OpenSans'),
          url('fonts/open-sans.woff2') format('woff2'),
          url('fonts/open-sans.woff') format('woff');
   }

hanya beban gaya yang diperlukan:
3. Elakkan memuatkan variasi fon yang tidak digunakan (italic, berani, dan lain -lain).

set aksara subset:
4. Sertakan hanya aksara yang digunakan pada halaman anda. (Lihat "masa beban halaman slash Dudley Storey dengan subsetting font CSS" untuk maklumat lanjut).

menangani foit:

Beberapa kaedah mengurangkan foit:

Elakkan fon tersuai (sandaran ke fon sistem):
1. yang mudah, walaupun kurang estetika menyenangkan, penyelesaiannya adalah bergantung semata -mata pada fon sistem. Contoh:

   body {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   }

Loader Font Web:
2. Perpustakaan JavaScript ini secara tidak sengaja memuatkan fon, memaparkan sandaran sehingga fon tersuai tersedia.

CSS Font Loading API:
3. API standard ini menyediakan kawalan halus ke atas pemuatan fon, membolehkan penggunaan fon sistem sehingga fon tersuai siap. (Lihat Manuel Matuzovic "Bermula dengan Font Loading CSS" untuk tutorial).

Masa Depan: CSS

:

font-display harta CSS menawarkan kawalan berbutir ke atas pemuatan fon dan tingkah laku sandaran. Nilai termasuk

,

, font-display, auto, dan block. Walaupun sokongan penyemak imbas masih terhad, ia mewakili masa depan pemuatan fon web. swap fallback optional Mitigating fout:

manakala kaedah di atas menangani foit, fout mungkin masih berlaku. Meminimumkan impaknya melibatkan pencocokan X-ketinggian dan lebar Font Font ke dimensi font adat menggunakan alat seperti Monica Dinculescu's Font Style Matcher.

Kesimpulan:

Pengurusan font web yang cekap memerlukan mengoptimumkan saiz fail dan mengawal tingkah laku pemuatan fon. Kaedah yang dibincangkan di sini, bersama -sama dengan sumber yang disediakan, menawarkan penyelesaian yang berkesan untuk meningkatkan prestasi laman web dan pengalaman pengguna.

Soalan Lazim (Soalan Lazim):

(bahagian Soalan Lazim dari input asal sudah ditulis dengan baik dan tidak memerlukan pengubahsuaian yang signifikan untuk penulisan semula ini.) Bahagian FAQ asal dikekalkan sebagai.

Atas ialah kandungan terperinci Mengoptimumkan fon web untuk prestasi: keadaan seni. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!