Comment pouvons-nous détecter le chargement des polices CSS `@font-face` pour empêcher l'affichage d'icônes cassées ?

Détection de l'état de chargement des polices pour CSS @font-face

Problème :
Lors de l'intégration d'une police à l'aide @font-face, les icônes peuvent initialement apparaître sous forme de cercles sans style avec des symboles ⓘ au lieu de leur conception prévue. Ce problème se produit car le chargement des fichiers de polices prend du temps.

Requête :
Comment pouvons-nous déterminer si les fichiers de polices @font-face ont été chargés pour garantir un affichage correct des icônes ?

Réponse :

jQuery-FontSpy.js Plugin :

Ce plugin open source détecte l'état de chargement des polices en comparant la largeur d'une chaîne rendue dans Comic Sans MS (une police largement disponible) avec la même chaîne rendue dans la police personnalisée que vous souhaitez charger. Lorsque les largeurs diffèrent, la police personnalisée a été chargée avec succès.

Personnalisation :

• onLoad : Classe ajoutée lorsque la police est chargé.
• onFail : Classe ajoutée si la police ne parvient pas à load.
• testFont : Une police largement disponible comme "Comic Sans MS".
• testString : Une chaîne distinctive utilisée pour la comparaison de largeur.
• délai : Temps entre la largeur de la police vérifications.
• timeOut : Temps d'attente maximum avant de supposer un échec de police.

Utilisation :

1. Incluez le plugin jQuery-FontSpy.js dans votre code HTML.
2. Appliquez le .bannerTextChecked aux éléments dont vous souhaitez détecter le chargement de police.
3. Initialisez le plugin :

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

4. Définissez des classes CSS personnalisées à contrôler visibilité des éléments basée sur le chargement de la police statut.

Exemple :

.hideMe {
  visibility: hidden !important;
}

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

Remarques supplémentaires :

• La compatibilité FontAwesome est actuellement non pris en charge.
• Pour plus de détails et une démo en direct, visitez : https://patrickmarabeas.github.io/jQuery-FontSpy.js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!