Comment savoir si la police de caractères a été appliquée ?

Question

Je suis en train de créer un site Web d'entreprise pour un client qui utilise beaucoup de polices personnalisées.

Sur jQuerys DOM-ready, j'effectue des calculs de placement pour déterminer l'endroit où certains menus contextuels avec une largeur et une hauteur dynamiques doivent être placés en fonction de leur contenu dynamique.

Ces calculs échouent, car DOM-ready est déclenché avant l'application de font-face, et les largeurs et hauteurs sont donc incorrectes.

Pour l'instant (pour le prototype), je fais les calculs 500ms après le DOM-ready pour pallier ce problème, mais cela ne peut pas être mis en production pour des raisons évidentes.

Le problème a été observé dans les dernières versions de Firefox et de chrome. IE 8 ne semble pas avoir ce problème, mais DOM-ready se déclenche assez tard, donc le délai est en quelque sorte intégré, je suppose :)

Attendre l'événement de chargement n'est pas une option, donc ma question est la suivante :

Existe-t-il un moyen fiable et inter-navigateurs de détecter l'application d'une police de caractères ?

Answer 1

J'ai trouvé une solution après m'être demandé pourquoi IE ne souffre pas de ce problème.

Firefox et Chrome/Safari déclenchent le DOMContentLoaded avant l'application de la police, ce qui cause le problème.

La solution est de ne pas écouter DOMContentLoaded mais à la place, allez-y à l'ancienne et écoutez onreadystatechange et attendez que le document.readyState === 'complete' qui est toujours déclenché après l'application du font-face (d'après mes tests) - ce qui est bien sûr ce qui se passe toujours dans IE puisqu'il ne supporte pas l'option DOMContentLoaded .

En fait, vous pouvez créer votre propre événement en jQuery appelé fontfaceapplied - peut-être qu'il devrait être intégré ;)

document.onreadystatechange = function() {
    if (document.readyState === 'complete') 
        $(document).trigger('fontfaceapplied');
};

Fait amusant : Opera le fait droite et attend de déclencher DOMContentLoaded jusqu'à ce que la police soit appliquée.

Answer 2

Mise à jour de l'ES6 :

Le poste de question est pour de nombreuses années que le IE Les versions 8 et antérieures d'Ecmascript étaient encore en vie et même la version 6 d'Ecmascript n'était pas encore sortie, mais maintenant vous pouvez écrire des callbacks sur document.fonts événements, par exemple

document.fonts.onloadingdone = () => {
  // do something after all fonts are loaded
};

Pour plus d'informations, voir ce poste .

Answer 3

Le fait de configurer la fonction pour qu'elle se déclenche après un délai de 200 ms résout ce problème lors de l'utilisation de Google Fonts.

Il y a un saut notable, mais c'est généralement le cas pour les choses de même hauteur. Pour les puristes, ce n'est peut-être pas parfait, mais cela fonctionne sur tous les navigateurs.