jQuery ne fonctionnant pas correctement, en raison de @ font-face

Question

J'ai un problème avec jQuery et @ font-face.

J'ai besoin de travailler sur la hauteur d'un <div>, qui fonctionne bien, mais il y a un petit délai pour le chargement des polices et dès qu'elles le font, les fontes @ font-face étaient plus grandes que le fallback polices, de sorte que la hauteur est plus petite que cela devrait être.

J'ai essayé d'utiliser Modernizr, mais cela ne sert à rien car il ne détecte que si le navigateur est capable de @ font-face, pas si les polices ont encore été chargées ou pas.

Le code jQuery est dans $ (document) .ready, mais je suppose que les polices ne retardent pas cela. Des idées quelqu'un?

Answer 1

La solution parfaite a été, comme Adam a fait remarquer, en utilisant $(window).load au lieu de $(document).ready

$(window).load(function(){ 
    $(".column").equalHeights(); 
}); 

Answer 2

Vous souhaiterez peut-être consulter l'API Google Font (http://code.google.com/apis/webfonts/docs/webfont_loader.html). Je crois qu'il charge dynamiquement la police et déclenche un certain nombre d'événements sur lesquels vous pouvez agir (pour redimensionner les siens).

Answer 3

L'API de police Google semble fonctionner tant que vous chargez des polices depuis google, kitkit ou ascender. Mais si vous utilisez autre chose (par exemple une autre police téléchargée à partir de fontsquirrel), vous pouvez essayer quelque chose comme this pour comprendre la police en cours de rendu. Vous pouvez également consulter cette discussion sur la détermination de la police utilisée Changing Body Font-Size based on Font-Family with jQuery