15

font-faceの読み込みの遅延を回避する実際の方法はありますか？

このFOUT （スタイルのないテキストのフラッシュ）についてのPaulIrishからのブログ投稿があります。その2009年から。

過去3年間で何か進展はありますか？

4

2 に答える 2

9

あなたは2つの別々の問題を提起しています。

実際のフォントファイルのダウンロードの遅延は基本的に避けられませんが、全体的なファイルサイズを最小限に抑えるために、実際には不要なものを含めないことで解決できます。使用しているサービス/メソッドによっては、これにより、含める文字セット（/言語）、および重みとスタイルを減らす必要がある場合があります。

スタイルが設定されていないテキストのフラッシュに関しては、上記のダウンロード時間の問題もあり、これはやや避けられません。ただし、可能な限り削減したら、この部分をより適切に制御するためにフォントローダーを実装する必要があります。TypeKitの（オープンソースの）実装と簡単な説明ブログ投稿があります。下部の例は、特にFOUTに対応しています。自分のコードにドロップするだけです。これは、Googleのローダ​​ーをサービスで使用することに関するFontDeckから
の情報です。これにより、GoogleのWebFontsサービスでも同じものを使用できるようになります。

他のサービスについては、独自の調査を開始する必要がありますが、これらは一般的な概念です。これらのツールを使用すると、スクリプトとCSSのルールを少し使用して、フォントを表示する準備ができるまで、影響を受けるテキストを非表示にすることができます。それは完全には考えられていませんが、少なくともFOUTを防ぎます。その最初の時間を過ぎると、ブラウザのキャッシュが引き継ぎ、大部分が無意味になるはずです。

于 2012-07-20T13:43:42.807 に答える
0

A）Cache-ControlとContent-Typeを正しく設定して、フォントをキャッシュします。

Cache-Control:public, max-age=15552000
Content-Type:application/x-font-woff;charset=UTF-8 (differs for other font files)

B）Varyヘッダーのhttpsは避けてください。Accet-Encodingのみを設定します。Vary：httpsは、IEフォントの読み込みを中断します。

Vary:Accept-Encoding

https://github.com/typekit/webfontloader

C）AとBは、ブラウザがすでにフォントをロードしている場合、最初のリクエストの後で完全に機能するはずです。これだけでは不十分な場合は、WebFontLoaderを試してください。

于 2017-09-02T07:31:51.937 に答える