Menghadapi masalah: Ralat berlaku semasa pemaparan fon WOFF tersuai dalam aplikasi web

Question

Saya sedang membangunkan aplikasi web dan cuba melaksanakan fon tersuai untuk elemen tertentu menggunakan peraturan @font-face dalam CSS. Saya telah mengikuti proses standard mentakrifkan fon dan menggunakannya pada elemen tertentu, tetapi saya menghadapi masalah untuk memaparkan fon dengan betul.

Berikut ialah kod berkaitan yang saya gunakan:

@font-face {
    font-family: ikon swiper;
    gaya fon: biasa;
    berat fon: 400;
    src: url('data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAZgABAAAAAD...' /* Selebihnya data fon yang dikodkan base64 */
}

.fon tersuai saya {
    font-family: "ikon-swiper", sans-serif;
}

Saya telah menyahkod rentetan base64 dan menyimpan fail fon dengan sambungan .woff. Walau bagaimanapun, apabila saya menggunakan kelas fon tersuai saya pada elemen, fon itu nampaknya tidak dipaparkan seperti yang diharapkan. Saya cuba melihat pratonton fon menggunakan alat pemaparan fon dalam talian (https://fontdrop.info) tetapi itu juga tidak berjaya.

Perkara yang saya semak dan cuba:

• Saya memastikan keseluruhan rentetan base64 dinyahkod dengan betul.
• Saya mengesahkan bahawa fail fon telah disimpan dalam format yang sah.
• Saya menggunakan nama keluarga fon yang betul ("swiper-icons") dalam CSS.
• Saya menyemak konsol penyemak imbas dan tiada mesej ralat yang berkaitan dengan pemuatan atau pemaparan fon.

Adakah ada sesuatu yang saya mungkin terlepas atau salah? Adakah terdapat langkah tambahan yang diperlukan untuk memastikan fon dipaparkan dengan betul? Adakah terdapat kemungkinan isu keserasian antara format fon tertentu atau alat pemaparan dalam talian? Terima kasih banyak atas sebarang panduan tentang cara menyelesaikan isu pemaparan fon ini.

Answer 1

Berikut ialah beberapa langkah penyelesaian masalah yang biasa saya gunakan:

1. Sokongan penyemak imbas: Pastikan penyemak imbas anda menyokong format WOFF. Jika boleh, gunakan WOFF2 untuk prestasi yang lebih baik.

2. Base64 Decoding: Semak semula penyahkodan Base64 untuk memastikan tiada ralat diperkenalkan.

3. Kesahan Fon: Uji fail fon pada alatan seperti Pengesah Fon atau Pengesah W3C.

4. Semakan CSS: Pastikan tiada gaya lain mengatasi fon tersuai anda. Untuk menguji, cuba gunakan pemilih yang lebih khusus untuk menggunakan fon pada elemen.

5. Nama Fon: Sahkan bahawa nama dalaman fon sepadan dengan pengisytiharan CSS anda.

6. Ujian Tempatan: Gunakan fail fon yang dihoskan secara tempatan dan bukannya Base64 untuk melihat sama ada isu itu berkaitan dengan pengekodan.

   @font-face {
       font-family: swiper-icons;
       src: url('path-to-your-font.woff') format('woff');
   }
   

7. Pelayar Berbeza: Uji pada pelbagai penyemak imbas untuk melihat sama ada masalahnya khusus untuk penyemak imbas tertentu.

8. Ciri Fon: Semak sama ada fon mempunyai ciri khas atau tetapan yang perlu diaktifkan melalui CSS.

9. CORS: Jika dihoskan secara luaran (bukan Base64), pastikan dasar CORS tidak menghalang fon daripada dimuatkan.

10. Fon sandaran: Gunakan fon sandaran dalam atribut font-family sebagai sandaran.

11. Isu Alat Dalam Talian: Perlu diingat bahawa sesetengah alatan dalam talian mungkin mempunyai masalah keserasian mereka sendiri.