Comment puis-je détecter le chargement d'une police à l'aide de @font-face pour éviter le FOUC ?

Détection de l'état de chargement d'une police à l'aide de @font-face

Souvent, les développeurs Web rencontrent une situation dans laquelle des icônes ou des polices sont affichées avec caractères d'espace réservé jusqu'à ce que les fichiers de polices soient complètement chargés. Cela peut distraire ou perturber l’expérience utilisateur. Pour résoudre ce problème, il est crucial de savoir quand une police a été chargée.

Le problème de détection du chargement des polices

Dans le scénario spécifique mentionné dans la question, Font-Awesome les icônes sont initialement affichées sous la forme  en raison du chargement retardé des fichiers de polices. L'objectif est de masquer ces icônes jusqu'à ce que la police soit chargée, améliorant ainsi l'apparence visuelle et les fonctionnalités du site Web.

Solution de détection de chargement de police

En attendant l'intégralité Si la page à charger n'est peut-être pas réalisable, il existe des méthodes pour déterminer si une police a été chargée spécifiquement. Une approche efficace consiste à comparer la largeur d'une chaîne rendue dans deux polices différentes.

Plugin jQuery-FontSpy.js

Pour simplifier ce processus, le jQuery-FontSpy Le plugin .js a été développé et est disponible sur GitHub (https://github.com/patrickmarabeas/jQuery-FontSpy.js). Ce plugin offre un moyen intuitif de détecter le chargement des polices et d'appliquer le style en conséquence.

Utilisation de jQuery-FontSpy.js

Pour utiliser le plugin, incluez le fichier JavaScript du plugin dans votre projet et initialisez-le sur les éléments cibles. Vous pouvez spécifier des classes personnalisées à ajouter ou à supprimer en fonction de l'état de chargement de la police. Par exemple :

<span class="bannerTextChecked">FontAwesome Icon</span>

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

CSS pour la suppression du FOUC

Pour supprimer complètement le Flash of Unstyled Content (FOUC), appliquez les règles CSS appropriées :

.hideMe {
    visibility: hidden !important;
}

.fontFail {
    visibility: visible !important;
    /* fallback font */
    /* apply necessary styling to avoid layout issues with the fallback font */
}

Conclusion

En utilisant des techniques de détection de chargement de polices, vous pouvez améliorer l'expérience utilisateur en garantissant que les polices ne sont affichées que lorsqu'elles sont complètement chargées. jQuery-FontSpy.js facilite ce processus, vous permettant d'ajouter un style en fonction de l'état de chargement de polices spécifiques.

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!