Webページをレンダリングする前にフォントが読み込まれるのを待ちます。

Question

私のウェブサイトにフォントを埋め込むために@ font-faceを使用しています。最初に、テキストがシステムのデフォルトとしてレンダリングされ、フォントファイルがロードされた後、正しいフォントが数秒後にレンダリングされます。この遅延を最小限に抑える/取り除く方法はありますか？

Answer 1

これはブラウザがどのように振る舞うかを示しています。

最初にあなたの@fontが宣言されていますか？それはあなたのHTMLにインラインで、ページ上のCSSシートで宣言されていますか、（うまくいけば）外部のCSSシートで宣言されていますか？

外部のシートにない場合は、それを1枚に移動してみてください（とにかくこれは通常の方が良い方法です）。

これが役立たない場合は、ユーザーエクスペリエンスに重大な悪影響を与える2番目の相違点の割合はご自身である必要がありますか？そうであれば、JavaScriptを検討して、リダイレクト、一時停止などできることがいくつかありますが、実際にはが悪いです。元の問題よりもです。ユーザーにとっては悪く、維持するには悪い

このリンクは役立つかもしれない：

http://paulirish.com/2009/fighting-the-font-face-fout/

Answer 2

たぶん、このような何か：実際のコンテンツとうまくいけば、完全にレンダリングされたフォントと体の内容を交換するときに、ページが読み込まれると、

$("body").html("<img src='ajax-loader.gif' />"); 

その後、あなたはこのかかわらで遊んでする必要があります...

Answer 3

だけIEの負荷を最初のフォントや、ページの残りの部分を。 他のブラウザは、何らかの理由で同時に物を読み込みます。フォントをホストしているサーバーやフォントのダウンロードに問題があるとします。 フォントが読み込まれるまでサイト全体がハングアップします。私の意見では、スタイルのないテキストのフラッシュは、サイトを全く見ないよりも優れています。

Answer 4

Joni Korpiはページの残りの部分より前にフォントを読み込むのに良い記事を持っています。

http://jonikorpi.com/a-smoother-page-load/

彼はまた、ユーザーがイライラしないように遅延を軽減するためにloading.gifを使用しています。

Answer 5

(function() { 
     document.getElementsByTagName("html")[0].setAttribute("class","wf-loading") 
     document.getElementsByTagName("html")[0].setAttribute("className","wf-loading") 
    })(); 

使用この方法.. Webfont.js

Answer 6

で使用編集：最善のアプローチは、CSSファイルにあなたのフォントをエンコードをbase64におそらくあります。つまり、HTMLが解析されて表示されるまでにフォントを完全に読み込む必要があります。これを行うには、フォントリスのWebFontジェネレータhttps://www.fontsquirrel.com/tools/webfont-generatorを「Expert」をクリックしてから「base64 encode」をクリックします。これがTypeKitのようなサービスの仕組みです。

---

オリジナルの答え：フォントは彼らの戦略をコピーすることによってFontLoader https://github.com/smnh/FontLoaderかを使用することでしょう読み込まれているかどうかを検出する もう一つの方法。

フォントが読み込まれると、テキストのサイズが変更されるため、ブラウザのscrollイベントにバインドされます。これは2つのdivを含んでおり（高さが変わるとスクロールする）、IEでは別のフォールバックが使用されます。

代わりにsetIntervalを使用してDOMを定期的にチェックすることができますが、javascriptイベントを使う方がはるかに高速で優れています。

明らかに、bodyの不透明度を0に設定し、フォントが読み込まれると一度に表示するようなことがあるかもしれません。

Answer 7

使用https://github.com/typekit/webfontloader

とあなたのする@ font-face内のCSSフォント・ディスプレイを使用することができる構成でイベント https://github.com/typekit/webfontloader#configuration

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script> 
<script> 
    WebFont.load({ 
     custom: { 
      families: [ 'CustomFont1', 'CustomFont2' ] 
     }, 
     active: function() { 
      //render your page 
     }, 
    }); 
</script> 

Answer 8

をご確認ください。利用可能なすべての値について キーワードは以下のとおりです。

• 自動
• ブロック
• スワップ
• フォールバック
• オプション

ジュリオMainardiは、それらのすべてについての素晴らしい記事を書いてい

あなたは現場でどこで使うべきですか？

ここで読むことができます：https://www.sitepoint.com/css-font-display-future-font-rendering-web/?utm_source=frontendfocus&utm_medium=email