Untuk memuatkan fon tersuai dengan betul, anda perlu menggunakan @font-face untuk mengisytiharkan dan memberi perhatian kepada keserasian format, Path dan CORS tetapan. 1. Gunakan @font-face untuk menentukan nama fon, sumber dan gaya; 2. Menyediakan kedua -dua format .woff2 dan. Untuk memastikan keserasian penyemak imbas; 3. Tetapkan tajuk silang domain yang betul untuk menyelesaikan masalah pemuatan luaran; 4. Sahkan laluan fail fon untuk mengelakkan 404 kesilapan; Dari segi pengoptimuman prestasi, 5. memuatkan berat fon yang diperlukan untuk mengurangkan permintaan; 6. Menjana subset fon untuk mengurangkan jumlah; 7. Gunakan fon-paparan: swap untuk mengelakkan ketidakmampuan teks; Masalah biasa termasuk fail lama cache → Cache jelas untuk melihat, ralat laluan fail → semak panel rangkaian, ejaan yang tidak konsisten → periksa nama keluarga font, watak tidak disokong → menjana pakej fon yang mengandungi watak-watak Cina yang biasa digunakan.

Menggunakan fon CSS tersuai sebenarnya tidak sukar, tetapi ramai orang cenderung mengabaikan beberapa perkara utama semasa operasi, mengakibatkan kegagalan pemuatan fon atau prestasi laman web yang terjejas. Artikel ini terutamanya bercakap tentang beberapa langkah praktikal dan langkah berjaga -jaga, supaya anda boleh menggunakan fon tersuai di laman web dengan lancar.

Cara memuatkan fon tersuai dengan betul

Untuk menggunakan fon tersuai, anda mesti terlebih dahulu mengisytiharkan font melalui peraturan @font-face . Peraturan ini menghendaki anda memberikan maklumat seperti nama font, sumber (URL), dan gaya fon.

 @font-face {
  font-family: 'mycustomfont';
  src: url ('myfont.woff2') format ('woff2'),
       format url ('myfont.woff') ('woff');
  Font-Weight: Normal;
  gaya font: normal;
}

Kemudian anda boleh menggunakannya seperti menggunakan fon sistem:

 badan {
  font-family: 'mycustomfont', sans-serif;
}

Terdapat beberapa butiran yang perlu diperhatikan:

• Sokongan Format : Adalah lebih baik untuk menyediakan kedua -dua format .woff2 dan .woff
• Masalah Cross-Domain : Jika anda memuatkan fail fon dari nama domain lain, pelayan mesti menetapkan tajuk CORS yang betul.
• Ketepatan Path : Pastikan laluan fail fon betul, jika tidak, fon tidak akan dimuatkan.

Petua Pengoptimuman Prestasi untuk Fon Tersuai

Walaupun fon tersuai boleh menjadikan laman web lebih cantik, jika tidak ditangani dengan betul, ia akan menjejaskan kelajuan pemuatan halaman. Berikut adalah beberapa cadangan pengoptimuman biasa:

• Memuatkan Permintaan : Muatkan hanya berat perkataan yang anda perlukan (seperti 400 dan 700), bukannya memuatkan semua ketebalan dan huruf miring sekaligus.
• Gunakan subset : Jika laman web hanya menggunakan bahasa Inggeris atau sejumlah kecil orang Cina, anda boleh menghasilkan subset fon untuk mengurangkan jumlah.
• Strategi Memuatkan Font : Anda boleh mempertimbangkan menggunakan font-display: swap; Untuk mengelakkan masalah teks yang tidak dapat dilihat.

 @font-face {
  font-family: 'mycustomfont';
  src: url ('myfont.woff2') format ('woff2');
  Font-Weight: 400;
  gaya font: normal;
  Font-diname: swap;
}

Dengan cara ini, walaupun fon belum dimuatkan, penyemak imbas akan memaparkan fon alternatif dan tunggu sehingga fon tersuai dimuatkan sebelum menggantikannya.

Soalan dan penyelesaian yang sering ditanya

Kadang -kadang fon nampaknya tidak berkesan, tetapi ia sebenarnya mungkin disebabkan oleh sebab -sebab berikut:

• Penyemak imbas fon fon lama → jelas cache atau cuba melihat dalam mod tanpa henti
• Fail font tidak dimuat naik dengan betul atau jalannya salah → periksa panel rangkaian dalam alat pemaju untuk melihat apakah 404
• Ejaan nama font tidak konsisten → pastikan font-family di @font-face sama persis dengan nama apabila digunakan
• Sesetengah watak khas tidak disokong → Jika ia adalah orang Cina, anda mungkin perlu menghasilkan pakej fon yang mengandungi watak -watak Cina yang biasa digunakan.

Pada dasarnya itu sahaja. Fon tersuai mungkin kelihatan mudah, tetapi sedikit pengawasan secara terperinci boleh menyebabkan keabnormalan memaparkan atau mempengaruhi pengalaman pengguna. Selagi anda memberi perhatian kepada laluan, format, dan prestasi, anda boleh menggunakannya dengan lancar.

Atas ialah kandungan terperinci Melaksanakan fon CSS tersuai di laman web. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!