フォントファイルの読み込み後にコンテナの高さを計算する

Question

@font-faceを使用して標準以外のフォントでスタイルを設定すると、実際のレンディションが発生する前にブラウザがまずフォントファイルをダウンロードする必要があります（CSS、JavaScriptなど） 。

これは、jQuery .height()がコンテナの高さを計算しようとすると、Chrome（v16.0.912.63）とSafari（v5.1.2）に問題が発生します。 計算された高さはです。フォントのロードが完了するまでです。下記（：working exampleビュー）：考える

/* CSS */ 
h1 { 
    font-family: MuseoSlab-500, "Helvetica Neue", Helvetica, Arial, sans-serif; 
    /* MuseoSlab-500 is defined using @font-face. */ 
} 

/* HTML */ 
<div id="box"> 
    <h1>This is my long header. What do you think? How about now?</h1> 
</div> 

/* JavaScript */ 
$(function() { 
    alert("The height of the above <div> = " + $('div#box').height()); 
}); 

しかし、Firefoxの（V8.0.1）は、テキストが非標準フォントを使用してレンダリングされた後、すなわち、正しい高さを計算することができます。

実際にChromeに伝える実用的な方法があるのか​​、それともすべてのブラウザであれば、計算を行う前に意図したフォントでテキストがレンダリングされるまで待つのが問題です。

$(window).load()を使用していますが、これは、すべての画像もロードを終了します。それはそんなに遅くなる。

Answer 1

あなたが話していることを処理するには、$(window).load()が唯一の方法だと思います。ページの読み込みが遅すぎる場合は、イメージを最適化するか、ページが読み込まれた後にイメージを読み込む必要があります。

Answer 2

あなたはこの方法でwebfontsを処理するとき、あなたには、いくつかのJavaScriptのコールバックを指定することができます

http://code.google.com/apis/webfonts/docs/webfont_loader.html#Events

Googleが提供webfontローダーを使用しようとすることができます：あなたはfontActiveコールバックを指定する必要があり、あなたのケースで

fontactive（のfontFamily、たFontDescription）

Cそれぞれの要求されたウェブフォントの読み込みが終了するとalledになります。 fontFamilyパラメータは、フォントファミリの名前であり、fontDescriptionは、フォントのスタイルと重みを表します。

として明確にグーグル、typekit、アセンダとモノタイプのオプションに加えて、そのページに

を説明し、あなたが非必ずしもグーグルから、任意のサイトからwebfontsをロードできることに注意してください、もあります任意のウェブフォントプロバイダからスタイルシートをロードできるカスタムモジュール。