jQuery risolve un'altezza sbagliata, a causa di @ font-face

Question

Ho un problema con jQuery e @ font-face.

Ho bisogno di calcolare l'altezza di un <div>, che funziona bene, ma poi c'è un piccolo ritardo per il caricamento dei caratteri e non appena lo fanno, i font @ font-face sono in realtà più grandi del fallback i caratteri, quindi l'altezza è più piccola di quanto dovrebbe essere.

Ho provato a utilizzare Modernizr, ma non è utile in quanto rileva solo se il browser è in grado di @ font-face, non se i font sono già stati caricati o meno.

Il codice jQuery è in $ (document) .ready, ma suppongo che i caratteri non ritardino l'attivazione. Qualche idea a qualcuno?

Answer 1

La soluzione ideale è stata, come Adam sottolineato, usando $(window).load invece di $(document).ready

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

Answer 2

Si potrebbe voler controllare l'API di Google Font (http://code.google.com/apis/webfonts/docs/webfont_loader.html). Credo che carichi dinamicamente il font e spenga un numero di eventi su cui puoi agire (per ridimensionare il tuo).

Answer 3

Google font api sembra funzionare fintanto che carichi font da google, typekit o ascender. Ma se stai usando qualcos'altro (ad esempio un altro font scaricato da fontsquirrel) potresti voler provare qualcosa come this per capire il font che si sta facendo. Si consiglia inoltre di controllare questa discussione sulla determinazione del tipo di carattere utilizzato Changing Body Font-Size based on Font-Family with jQuery