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

Comment détecter le chargement d'une police personnalisée (@font-face) ?

Lors de l'incorporation de polices personnalisées à l'aide de @font-face En règle générale, il est essentiel de déterminer quand les fichiers de polices ont été chargés avec succès. Sans cette connaissance, vous risquez de rencontrer le problème de l'affichage de caractères fictifs (par exemple, "") jusqu'à ce que les polices soient disponibles.

Solution : jQuery FontSpy.js

Une solution populaire est le plugin jQuery FontSpy.js, qui vous permet de styliser les éléments selon que la police personnalisée a ou non chargé.

Mise en œuvre

Pour utiliser FontSpy.js, suivez ces étapes :

1. Inclure le fichier JavaScript du plugin dans votre project.


2. Appliquez la fonction fontSpy aux éléments qui afficheront la police personnalisée.


3. Configurez des options telles que les classes onLoad et onFail pour s'applique lorsque la police est chargée ou ne se charge pas, respectivement.

Le plugin fonctionne en comparant la largeur d'une chaîne affichée dans deux polices différentes. Lorsque les largeurs diffèrent, cela indique que la police personnalisée a été chargée avec succès.

Exemple de code

Considérez l'extrait suivant, qui applique FontSpy.js à un élément avec le classe mes-icônes :

<br>$(document).ready(function() {<br> $('.my-icons').fontSpy({</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">onLoad: 'show-icons',
onFail: 'hide-icons'

Copier après la connexion

});
});

Une fois la police personnalisée se charge, la classe show-icons sera appliquée à l'élément, rendant les icônes visibles. Si la police ne parvient pas à se charger, la classe hide-icons sera appliquée à la place.

Considérations supplémentaires

• Police de secours : Spécifiez une police de secours dans la configuration fontSpy à afficher en cas d'échec de la police personnalisée load.
• Timeout : FontSpy.js inclut un mécanisme de délai d'attente pour éviter une attente infinie. Configurez l'option timeOut pour éviter des retards potentiels.
• Prise en charge des navigateurs : FontSpy.js prend en charge les navigateurs modernes, notamment Chrome, Firefox, Safari et Edge.
• Polices d'origine croisée : FontSpy.js gère le chargement des polices d'origine croisée en toute transparence.

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!