Bagaimanakah Saya Boleh Mengesan Apabila Fon Tersuai Dimuatkan Menggunakan @font-face?

Bagaimana untuk Mengesan Pemuatan Fon Tersuai (@font-face)?

Apabila menggabungkan fon tersuai menggunakan @font-face peraturan, adalah penting untuk menentukan bila fail fon telah berjaya dimuatkan. Tanpa pengetahuan ini, anda mungkin menghadapi isu watak pemegang tempat (cth., "") dipaparkan sehingga fon tersedia.

Penyelesaian: jQuery FontSpy.js

Penyelesaian yang popular ialah pemalam jQuery FontSpy.js, yang membolehkan anda menggayakan elemen berdasarkan sama ada fon tersuai mempunyai dimuatkan.

Pelaksanaan

Untuk menggunakan FontSpy.js, ikuti langkah berikut:

1. Sertakan fail JavaScript pemalam dalam anda projek.


2. Gunakan fungsi fonSpy pada elemen yang akan memaparkan fon tersuai.


3. Konfigurasikan pilihan seperti kelas onLoad dan onFail untuk gunakan apabila fon dimuatkan atau gagal dimuatkan, masing-masing.

Pemalam berfungsi dengan membandingkan lebar rentetan yang dipaparkan dalam dua fon berbeza. Apabila lebar berbeza, ini menunjukkan bahawa fon tersuai telah berjaya dimuatkan.

Contoh Kod

Pertimbangkan coretan berikut, yang menggunakan FontSpy.js pada elemen dengan kelas ikon saya:

$(dokumen).sedia(fungsi() {
$('.my-icons').fontSpy({

onLoad: 'show-icons',
onFail: 'hide-icons'

});
});

Setelah fon tersuai dimuatkan , kelas ikon tunjukkan akan digunakan pada elemen, menjadikan ikon kelihatan. Jika fon gagal dimuatkan, kelas ikon sembunyikan akan digunakan sebaliknya.

Pertimbangan Tambahan

• Fon Saling Balik: Nyatakan fon sandaran dalam konfigurasi fontSpy untuk dipaparkan sekiranya fon tersuai gagal muatkan.
• Tamat masa: FontSpy.js termasuk mekanisme tamat masa untuk mengelakkan menunggu tanpa had. Konfigurasikan pilihan tamat masa untuk mengelakkan kemungkinan kelewatan.
• Sokongan Penyemak Imbas: FontSpy.js menyokong penyemak imbas moden, termasuk Chrome, Firefox, Safari dan Edge.
• Fon Silang Asal: FontSpy.js mengendalikan pemuatan fon silang asal dengan lancar.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengesan Apabila Fon Tersuai Dimuatkan Menggunakan @font-face?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!