カスタムフォントは表示されるまでロードされません（表示されない場合はロードされません）

Question

私はカスタムフォントを持っています。img/roboto/Roboto-Medium.ttfとして保存されています。私が使用して私のCSSスタイルシートでそれを初期化：フォントが使用されている唯一のdivはあり

@font-face { 
    font-family: robotomedium; 
    src: url("img/roboto/Roboto-Medium.ttf"); 
} 

ある、とjQueryはそれをフェードインするまではdisplay: none;である：

<div id="test" style="font-family: robotomedium; display: none;">Some text</div> 

必要な、jQueryの

$("#test").fadeIn(); 

フォントはユーザーのシステムに存在しないため、サーバーからダウンロードする必要があります。私は、クライアントがページが読み込まれるときにフォントをダウンロードすると思うだろうが、目に見えるテキストがあるまで待つようだ。 ユーザーがdivを表示すると、フォントが表示され始めたときにフォントがダウンロードされ、それには時間がかかるため、テキストは1秒ほど目に見えません。どうすればこれを防ぐことができますか？あまり結果を出すことなく、フォントをプリロードしようとしました。

Answer 1

アイブ氏は、それはいくつかのウェブサイト上で数回起こるが、見て主にサイトが遅いので、それは事が

と

を要求されているときに応じてフォントを養うために、サーバーの時間がかかる場合 A.

B.フォント自体が重いです。

可能であれば@fontの顔をできるだけ上に置いてみてください。そうすれば読み込みが速くなり、robotoフォントのgoogle CDNも試してみることができます。人のコンピュータにフォントをダウンロードしたら

https://www.google.com/fonts#UsePlace:use/Collection:Roboto

技術的には、それはそれはしばらく示しrobotoものと類似している「フォールバック」フォントを試してみてください、キャッシュ/メモリも

にそこに滞在する必要がありますロボトがロードされています。