Comment puis-je détecter l'état de chargement des polices pour améliorer le style des éléments ?

Détection de l'état de chargement des polices pour un style d'élément amélioré

Lors de l'utilisation de Font-Awesome, il est crucial de s'assurer que les icônes ne s'affichent que lorsque leur correspondant les fichiers de polices ont été chargés. Pour y parvenir, il est essentiel de savoir si une police a été chargée.

jQuery-FontSpy.js à la rescousse

Entrez jQuery-FontSpy.js, un plugin qui compare les largeurs des chaînes de texte dans différentes polices pour déterminer si une police personnalisée a été chargée. Il offre aux développeurs un contrôle précis sur le style des éléments en fonction de l'état de chargement de la police.

Implémentation

Pour intégrer jQuery-FontSpy.js, incluez-le simplement en tant que fichier référence dans votre fichier JavaScript. Ce plugin prend diverses options de personnalisation, notamment :

• font : spécifie la famille de polices personnalisée à vérifier.
• onLoad : classe CSS à appliquer lorsque la police est chargée.
• onFail : classes CSS à appliquer si la police ne parvient pas à se charger.
• testFont : police sécurisée pour le Web utilisée pour comparaison.
• testString : chaîne utilisée pour calculer la largeur de la police.
• timeOut : durée d'expiration pour empêcher l'animation de chargement de police indéfinie.

Application du plugin

Une fois jQuery-FontSpy.js inclus, vous pouvez l'appliquer aux éléments en utilisant le Fonction .fontSpy(). Par exemple, l'extrait de code suivant applique le plugin à un élément avec la classe BannerTextChecked.

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

Style pour le contrôle de la visibilité

Pour contrôler la visibilité des éléments en fonction lors du chargement des polices, vous pouvez définir des classes CSS comme hideMe et fontFail.

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

Conclusion

jQuery-FontSpy.js offre aux développeurs une solution fiable pour détecter l'état de chargement des polices. En utilisant les options fournies et le style CSS, vous pouvez créer une expérience utilisateur fluide et dynamique où les éléments s'adaptent parfaitement à la disponibilité des polices.

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!