Cara meningkatkan prestasi halaman dengan pemuat font

Ringkasan mata utama

Menggunakan loader font boleh meningkatkan prestasi laman web dengan ketara kerana ia dapat mengawal masa pemuatan dan cara fon laman web, dengan itu memendekkan masa memuatkan halaman dan mengelakkan "kelip -kelip teks yang tidak terkawal" (FOUT).
WebFontLoader Perpustakaan JavaScript adalah alat yang sangat berguna yang boleh memuatkan fon dari pelbagai sumber di latar belakang selepas halaman dimuatkan, dan membolehkan penyesuaian proses pemuatan menggunakan CSS dan fungsi panggil balik JavaScript.
Penggunaan fon dan pengalaman pengguna mesti seimbang; Oleh itu, menggunakan pemuat fon dan melaksanakan fon alternatif dapat membantu mengekalkan pengalaman pengguna yang lancar dan cepat.

Terima kasih kepada Jason Pamen untuk inspirasi yang membawa kepada penulisan artikel ini. Jika tidak, saya mungkin tidak pernah memikirkan perkara ini! Kali terakhir anda menggunakan Arial, Times New Roman, Helvetica atau ... (Chilling) di laman web ... Bilakah komik sans? Fon web kelihatan terlambat, tetapi apabila mereka muncul, kita tidak pernah melihat ke belakang. Fon menyeronokkan, (biasanya) percuma dan mudah dilaksanakan:

<code>@import url(http://fonts.googleapis.com/css?family=Ubuntu:300,300italic,400,400italic,500,500italic,700,700italic);</code>

Anda kemudian boleh menggunakan font di halaman anda, contohnya:

<code>body {
    font-family: Ubunutu, sans-serif;
    font-weight: 400;
}</code>

Fon berfungsi dengan baik pada peranti mudah alih, jadi pengguna mendapat pengalaman yang baik dalam reka bentuk web responsif anda.

atau adakah ia benar -benar berlaku?

Selepas gambar, fon biasanya merupakan sumber terbesar dalam laman web. Font Ubuntu di atas menambah hampir 250kb ke halaman, yang terbukti pada sambungan rangkaian mudah alih yang lebih perlahan. Chrome, IE, safari, dan opera meninggalkan ruang kosong apabila fon dimuatkan, jadi halaman tidak boleh digunakan. Firefox dan versi lama teks paparan opera dalam fon alternatif dan suis -ini dipanggil teks yang tidak terkawal (FOUT). Kedua -dua situasi ini adalah ideal. Kami jarang bimbang tentang isu -isu penimbang fon dan membuat alasan seperti "ini hanya masalah dengan halaman pertama" atau "banyak pengguna mempunyai fon cache." Kami boleh meninggalkan fon yang kurang digunakan; Beberapa orang berani mengamalkan penyelesaian yang jelas menggunakan fon sistem operasi standard - pelanggan dan pereka kami tidak akan pernah memaafkan kami.

JavaScript Webfontloader

bernasib baik, terdapat satu lagi pilihan: WebFontLoader. Perpustakaan JavaScript ini boleh memuatkan fon dari Google, TypeKit, Fonts.com, FontDeck, atau pelayan anda sendiri di latar belakang selepas beban halaman. Perpustakaan itu sendiri menambah 17kb tambahan ke halaman, tetapi ia juga akan dimuat turun sebagai proses latar belakang. Untuk memuatkan fon Ubuntu yang ditetapkan di atas, kami membuat objek global yang dipanggil WebFontConfig yang mentakrifkan fon dan tetapan kami, dan kemudian memuatkan WebFontLoader itu sendiri:

<code>@import url(http://fonts.googleapis.com/css?family=Ubuntu:300,300italic,400,400italic,500,500italic,700,700italic);</code>

Oleh itu, kita dapat menentukan sama ada sesetengah atau semua fon dimuatkan berdasarkan keupayaan peranti dan jalur lebar. Idealnya, kita boleh menggunakan API Maklumat Rangkaian, tetapi sokongan penyemak imbas masih terhad. Sebagai alternatif, perhatikan tetapan masa tamat dalam WebFontConfig;

fungsi panggil balik CSS

WebFontLoader menggunakan nama kelas ke elemen HTML semasa operasi:

• - Semua fon diminta .wf-loading
• - Semua fon tersedia .wf-active
• - tidak dapat memuatkan sebarang fon .wf-inactive

Nama kelas juga akan digunakan untuk setiap fon:

• - Font tunggal diminta .wf-<familyname>-<fvd>-loading</fvd></familyname>
• - Tersedia dalam font tunggal .wf-<familyname>-<fvd>-active</fvd></familyname>
• - Tidak dapat memuatkan font tunggal .wf-<familyname>-<fvd>-inactive</fvd></familyname>

di mana

adalah versi yang disucikan nama font, dan <familyname></familyname> adalah penerangan variasi, seperti I4 mewakili huruf miring 400 ketebalan. Ini membolehkan kita menukar fon selepas muat turun fon -cara yang sama yang Firefox lakukan, contohnya: <fvd></fvd>

<code>body {
    font-family: Ubunutu, sans-serif;
    font-weight: 400;
}</code>

fungsi panggil balik JavaScript Fungsi panggil balik JavaScript yang sama boleh ditakrifkan dalam WebfontConfig, walaupun ini jarang berguna, seperti:

Rujuk dokumentasi WebFontLoader untuk maklumat lanjut.

var WebFontConfig = {
    google: {
        families: [ 'Ubuntu:400,300,400italic,300italic,500italic,500,700,700italic:latin' ]
    },
    timeout: 2000
};

(function(){
    var wf = document.createElement("script");
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
        '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.async = 'true';
    document.head.appendChild(wf);
})();

Minimize fout

Jika fon alternatif anda sangat berbeza dari fon web anda dari segi gaya, ketebalan, atau jarak, teks yang tidak disegarkan berkedip boleh menjadi keras. Walau bagaimanapun, dengan hanya sedikit percubaan, anda boleh menyesuaikan fon alternatif, ketebalan, ketinggian garis dan margin untuk memastikan bahawa unsur -unsur halaman tetap kira -kira sama apabila memuatkan fon web ... lihat Craig Buckler pada codepen (@craigbuckler) artikel " Bagaimana menggunakan font loader ".

Klik butang "Switch Font" untuk melihat kesan penukaran fon. Perubahan ini tidak sepenuhnya tidak jelas, tetapi penting jika pengguna mula membaca, mereka tidak kehilangan tempat mereka. Anda boleh menambah butang "Switch Font" ke mana -mana halaman untuk membantu anda menilai gaya alternatif yang sesuai:

Pendek kata: Penggunaan fon mungkin percuma, tetapi sila cuba meminimumkan kos pengguna. Jika anda memuatkan 1MB fail font, reka bentuk web responsif yang anda buat dengan teliti tidak sesuai untuk peranti mudah alih!

/* 默认操作系统字体 */
body {
    font-family: arial, sans-serif;
}

/* 字体现在已加载 */
.wf-active body {
    font-family: 'Ubuntu';
}

(Berikut adalah bahagian FAQ, yang telah ditulis semula dan diintegrasikan berdasarkan teks asal, dan beberapa kandungan telah diselaraskan)

soalan yang sering ditanya mengenai penggunaan font loader untuk meningkatkan prestasi laman web

Apakah loader font? Mengapa penting untuk prestasi halaman?

Font Loader adalah alat yang membolehkan anda mengawal bagaimana fon web dimuatkan di laman web anda. Adalah penting untuk prestasi halaman kerana ia dapat membantu mengurangkan masa pemuatan laman web. Apabila laman web dimuatkan, penyemak imbas mesti memuat turun semua sumber yang diperlukan, termasuk fon. Jika fon besar atau besar, ini akan melambatkan masa pemuatan halaman. Pemuat fon membolehkan anda mengawal bagaimana dan bagaimana fon ini dimuatkan, yang dapat meningkatkan prestasi halaman anda dengan ketara.

Bagaimanakah font loader meningkatkan prestasi halaman?

Font Loader meningkatkan prestasi halaman dengan membolehkan anda mengawal pemuatan fon web. Anda boleh memilih untuk memuatkan fon secara asynchronously, yang bermaksud mereka tidak akan menyekat rendering untuk seluruh halaman. Ini dapat mengurangkan masa yang diperlukan untuk halaman menjadi interaktif. Di samping itu, fon loader boleh membantu mencegah fenomena "teks yang tidak terkawal" (FOUT), di mana penyemak imbas memaparkan fon alternatif semasa fon web masih dimuatkan.

Apakah pemuat font yang biasa digunakan?

Beberapa pemuat font yang biasa digunakan, termasuk Webfont Loader Google dan Loader WebFont TypeKit. Kedua -dua alat menyediakan pelbagai pilihan untuk mengawal bagaimana fon web dimuatkan. Terdapat juga beberapa plugin WordPress (seperti Font Google Font) yang boleh dengan mudah melaksanakan pemuatan fon di laman web anda.

Bagaimana untuk melaksanakan font loader di laman web saya?

Melaksanakan loader font di laman web anda biasanya memerlukan menambah skrip ke HTML anda. Skrip ini akan memuatkan font loader, dan anda kemudian boleh menggunakan API font loader untuk mengawal bagaimana fon web dimuatkan. Proses yang tepat mungkin berbeza -beza bergantung kepada loader font yang anda gunakan, jadi lebih baik merujuk kepada dokumentasi untuk arahan tertentu.

Bolehkah saya menggunakan font loader dengan mana -mana font web?

Kebanyakan pemuat fon bersesuaian dengan mana -mana fon web, selagi fon dihoskan dengan cara yang membolehkan pemuat fon dimuatkan. Ini termasuk fon dan fon yang dihoskan sendiri yang dihoskan oleh perkhidmatan font seperti Google Fonts atau TypeKit.

akan menggunakan font loader mempengaruhi penampilan fon saya?

Menggunakan loader font boleh menjejaskan penampilan fon anda kerana ia dapat membantu mencegah FOUT. Walau bagaimanapun, ia tidak boleh mengubah reka bentuk atau gaya fon sebenar. Jika anda melihat apa -apa perubahan dalam penampilan font selepas melaksanakan font loader, ia mungkin disebabkan oleh isu konfigurasi.

Apakah "teks yang tidak disegarkan" (FOUT)? Bagaimanakah pemuat font menghalangnya?

Fout adalah fenomena di mana penyemak imbas memaparkan fon alternatif apabila fon web masih dimuatkan. Ini boleh menyebabkan kelip -kelip teks ringkas, dengan fon berbeza dari fon akhir, yang boleh membuat pengguna merasa tidak selesa. Pemuat fon menghalang FOUT dengan membolehkan anda mengawal apabila anda menggunakan fon web ke teks. Sebagai contoh, anda boleh memilih untuk menyembunyikan teks sehingga fon web dimuatkan, atau anda boleh memaparkan teks dalam fon alternatif dan menggantikannya selepas fon web dimuatkan.

Bolehkah font loader meningkatkan SEO laman web saya?

Ya, pemuat font boleh meningkatkan SEO laman web anda dengan mengurangkan masa pemuatan halaman. Waktu pemuatan halaman adalah faktor yang dipertimbangkan oleh enjin carian apabila laman web ranking, jadi anda boleh melakukan apa sahaja untuk mengurangkannya, yang boleh meningkatkan SEO anda.

Adakah terdapat kelemahan menggunakan loader font?

Satu kelemahan berpotensi menggunakan font loader ialah ia boleh meningkatkan kerumitan kod laman web. Walau bagaimanapun, manfaat prestasi halaman dan pengalaman pengguna yang lebih baik sering melebihi kelemahan ini. Di samping itu, banyak pemuat fon mempunyai dokumentasi dan sokongan yang baik, menjadikannya agak mudah dilaksanakan.

Bagaimana untuk mengetahui sama ada font loader meningkatkan prestasi halaman saya?

anda boleh menggunakan pelbagai alat untuk mengukur prestasi halaman anda sebelum dan selepas melaksanakan font loader. Alat ini boleh menyediakan metrik seperti masa pemuatan halaman, masa menarik pertama, dan masa interaktif, yang dapat membantu anda mengukur kesan loader font. Beberapa alat pengukuran prestasi yang biasa digunakan termasuk Lighthouse Google dan WebpageTest.

Atas ialah kandungan terperinci Cara meningkatkan prestasi halaman dengan pemuat font. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!