web-dev-qa-db-ja.com

フォントがロードされるのを待ってからWebページをレンダリングします

@ font-faceを使用して、Webサイトにフォントを埋め込みます。最初にテキストがシステムのデフォルトとしてレンダリングされ、次に（おそらくフォントファイルが読み込まれた後）正しいフォントが数秒後にレンダリングされます。フォントのロードなどが完了するまでページのレンダリングを遅らせることで、この遅延を最小限に抑える/取り除く方法はありますか？.

cssfontsfont-face
50
wheresrhys

これは、ブラウザーの動作に依存します。

まず、@ fontはどこで宣言されていますか？ HTMLのインライン、ページ上のCSSシートで宣言されている、または（できれば）外部CSSシートで宣言されていますか？

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

これが役に立たない場合は、2番目の違いのほんの一部がユーザーエクスペリエンスに実際に非常に有害であると自問する必要がありますか？もしそうなら、JavaScriptを検討してください、あなたができるかもしれないいくつかのこと、リダイレクト、一時停止などがありますが、これらは実際にはworseよりも元の問題。ユーザーにとっては悪いことであり、メンテナンスがさらに悪い。

このリンクは役に立つかもしれません：

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

18
Tom Gullen

Edit：最善のアプローチは、おそらくbase64でフォントをエンコードすることです。これは、HTMLが解析および表示されるまでに、フォントを完全にロードする必要があることを意味します。これを行うには、フォントリスのウェブフォントジェネレーター https://www.fontsquirrel.com/tools/webfont-generator で[エキスパート]をクリックし、次に[base64エンコード]をクリックします。これがTypeKitのようなサービスの仕組みです。

元の答え：フォントがロードされているかどうかを検出する別の方法は、FontLoaderを使用することです https://github.com/smnh/FontLoader =または戦略をコピーすることにより。

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

別の方法として、setIntervalを使用してDOMを定期的にチェックする方法もありますが、javascriptイベントを使用する方がはるかに高速で優れています。

明らかに、bodyの不透明度を0に設定してから、フォントが読み込まれると表示します。

15
Ryan Taylor

Joni Korpiには、ページの残りの部分の前にフォントを読み込むことに関する素晴らしい記事があります。

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

彼はまた、load.gifを使用して遅延を緩和し、ユーザーがイライラしないようにします。

5
davecave

IEが最初にフォントをロードし、次にページの残りの部分をロードします。他のブラウザーは、理由により同時にロードします。フォントをホストするサーバーまたはフォントのダウンロードに問題があると想像してください。フォントがロードされるまで、サイト全体をハングアップします。

4
nunopolonia

https://github.com/typekit/webfontloader を使用します

設定のイベントを確認してください 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>
3
klodoma

誰も言及していないので、この質問には更新が必要だと思います。問題を解決する方法は、最新のブラウザーでサポートされている「プリロード」オプションを使用することでした。

誰かが古いブラウザをサポートする必要がない場合。

<link rel="preload" href="assets/fonts/xxx.woff" as="font" type="font/woff" crossorigin>

詳細が記載された便利なリンク：

https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_contenthttp://www.bramstein.com/writing/preload-hints-for- web-fonts.html

2
Thiago C. S Ventura

@ font-face内でCSS font-displayを使用できます。利用可能なすべての値のキーワードは次のとおりです。

  • オート
  • ブロック
  • スワップ
  • 後退する
  • オプショナル

Giulio Mainardiは、それらすべてについてのニースの記事を書いており、サイトポイントのどこでそれを使うべきでしょうか。

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

1
Lirianna