Bagaimanakah Kami Boleh Mengesan Apabila Fon CSS `@font-face` Telah Dimuatkan untuk Mengelakkan Paparan Ikon Patah?

Mengesan Status Pemuatan Fon untuk CSS @font-face

Isu:
Apabila menyepadukan fon menggunakan @font-face, ikon pada mulanya mungkin muncul sebagai bulatan tidak digayakan dengan simbol ⓘ dan bukannya reka bentuk yang dimaksudkan. Isu ini timbul kerana fail fon mengambil masa untuk dimuatkan.

Pertanyaan:
Bagaimana kita boleh menentukan sama ada fail fon @font-face telah dimuatkan untuk memastikan ikon yang betul paparan?

Jawapan:

jQuery-FontSpy.js Plugin:

Pemalam sumber terbuka ini mengesan status pemuatan fon dengan membandingkan lebar rentetan yang diberikan dalam Comic Sans MS (fon yang tersedia secara meluas) dengan rentetan yang sama yang diberikan dalam fon tersuai yang ingin anda muatkan. Apabila lebar berbeza, fon tersuai telah berjaya dimuatkan.

Penyesuaian:

• onLoad: Kelas ditambah apabila fon sedang dimuatkan.
• onFail: Kelas ditambah jika fon gagal dimuatkan.
• testFont: Fon tersedia secara meluas seperti "Comic Sans MS".
• testString: Rentetan tersendiri yang digunakan untuk perbandingan lebar .
• kelewatan: Masa antara lebar fon semak.
• masa tamat: Masa maksimum untuk menunggu sebelum menganggap kegagalan fon.

Penggunaan:

1. Sertakan pemalam jQuery-FontSpy.js dalam anda HTML.
2. Gunakan kelas .bannerTextChecked kepada elemen yang anda ingin kesan pemuatan fonnya.
3. Mulakan pemalam:

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

4. Tentukan kelas CSS tersuai untuk mengawal keterlihatan elemen berdasarkan pemuatan fon status.

Contoh:

.hideMe {
  visibility: hidden !important;
}

.fontFail {
  visibility: visible !important;
  /* Style to resemble the custom font */
}

Nota Tambahan:

• Keserasian FontAwesome kini tidak disokong.
• Untuk butiran lanjut dan demo langsung, lawati: https://patrickmarabeas.github.io/jQuery-FontSpy.js

Atas ialah kandungan terperinci Bagaimanakah Kami Boleh Mengesan Apabila Fon CSS `@font-face` Telah Dimuatkan untuk Mengelakkan Paparan Ikon Patah?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!