Bagaimanakah Saya Boleh Mengesan Status Pemuatan Fon untuk Memperbaik Penggayaan Elemen?

Mengesan Status Pemuatan Fon untuk Penggayaan Elemen Dipertingkat

Semasa menggunakan Font-Awesome, adalah penting untuk memastikan bahawa ikon hanya dipaparkan apabila sepadan dengannya fail fon telah dimuatkan. Untuk mencapai matlamat ini, adalah penting untuk mengetahui sama ada fon telah dimuatkan.

jQuery-FontSpy.js to the Rescue

Masukkan jQuery-FontSpy.js, pemalam yang membandingkan lebar rentetan teks dalam fon yang berbeza untuk menentukan sama ada fon tersuai telah dimuatkan. Ia menyediakan pembangun kawalan terperinci ke atas penggayaan elemen berdasarkan status pemuatan fon.

Pelaksanaan

Untuk menyepadukan jQuery-FontSpy.js, cuma masukkannya sebagai rujukan dalam fail JavaScript anda. Pemalam ini mengambil pelbagai pilihan untuk penyesuaian, termasuk:

• fon: Menentukan keluarga fon tersuai untuk diperiksa.
• onLoad: Kelas CSS untuk digunakan apabila fon telah dimuatkan.
• onFail: Kelas CSS untuk digunakan jika fon gagal dimuatkan.
• testFont: Fon selamat web digunakan untuk perbandingan.
• testString: Rentetan yang digunakan untuk mengira lebar fon.
• timeOut: Tempoh tamat masa untuk mengelakkan animasi memuatkan fon yang tidak tentu.

Memohon Plugin

Setelah jQuery-FontSpy.js adalah disertakan, anda boleh menggunakannya pada elemen menggunakan fungsi .fontSpy(). Sebagai contoh, coretan kod berikut menggunakan pemalam pada elemen dengan banner kelasTextChecked.

$('.bannerTextChecked').fontSpy({
  onLoad: 'hideMe',
  onFail: 'fontFail anotherClass'
});

Penggayaan untuk Kawalan Keterlihatan

Untuk mengawal keterlihatan elemen berdasarkan pada pemuatan fon, anda boleh menentukan kelas CSS seperti hideMe dan fontFail.

.hideMe {
  visibility: hidden !important;
}
.fontFail {
  visibility: visible !important;
  /* fall back font */
  /* necessary styling so fallback font doesn't break your layout */
}

Kesimpulan

jQuery-FontSpy.js memperkasakan pembangun dengan penyelesaian yang boleh dipercayai untuk mengesan status pemuatan fon. Dengan menggunakan pilihan yang disediakan dan penggayaan CSS, anda boleh mencipta pengalaman pengguna yang lancar dan dinamik di mana elemen menyesuaikan dengan lancar dengan ketersediaan fon.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengesan Status Pemuatan Fon untuk Memperbaik Penggayaan Elemen?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!