1

サーバー要求を最小限に抑え、ページをオフラインで使用できるようにするために、将来の使用のためにページを読み込むために必要なすべてのリソースをキャッシュするように appcache を構成した単一ページの静的サイトがあります。

フォントのサポートで問題が発生しました。@font-face と woff、ttf、svg、eot 形式の Web フォントを使用して、すべてのブラウザーとの互換性を確保しています。問題は、ブラウザー間の互換性を確保するために、キャッシュ マニフェストに複数のフォントを含める必要があることです。通常、ブラウザーは @font-face を読み取り、適切なフォント形式を選択し、その形式のみをダウンロードします (ローカルで利用可能な場合はまったくダウンロードしません)。キャッシュおよびオフラインで利用できます。私の解決策は、すべてのフォント形式をキャッシュ マニフェストに含めることでした。これはうまくいきましたが、クライアントが必要のないフォントをダウンロードしたため、非常に無駄でした。

最終的に、私はappcache、ttf、woff、eot、および svg フォントを比較して、ブラウザーのサポートについて調査を行いました。appcache をサポートするすべてのブラウザは woff または ttf で動作し、svg と eot はほとんどサポートされていないという結論に達しました。(制限要因は、android には woff がサポートされておらず、IE には ttf がサポートされていないことです)。これを使用すると、フォントはどこでも正しく表示されます。ただし、必要に関係なく 2 つのフォントがダウンロードされるため、依然として非常に非効率的です。

要約すると、フォントとアプリキャッシュを最も効率的に処理するための推奨される方法は何ですか?

4

2 に答える 2

1

別の質問で発見したように、正しくフォーマットされている限り、IE 9 以降は TTF フォントをサポートします。これは、HTML5 アプリケーション キャッシュをサポートするすべての主要なブラウザーが ttf フォントでも動作することを意味するため、その 1 つの形式をキャッシュに含めるだけで済みます。防弾 @font-face 構文を調整して、WOFF よりも TTF を優先するようにし (それがキャッシュにあるため)、キャッシュ マニフェストにワイルドカードを追加して、エッジ ケースに対処しました。

変更した @font-face フォーマットは次のとおりです。

@font-face {font-family: '<font-family>';src: url('<font-file>.eot?#iefix') format('embedded-opentype');src: local('<font-family>'),url('<font-file>.ttf')  format('truetype'),url('<font-file>.woff') format('woff'),url('<font-file>') format('svg');}

キャッシュ マニフェストの形式は次のとおりです。

CACHE MANIFEST
<other stuff>
...
/<font-file>.ttf

NETWORK:
*.ttf
*.woff
*.svg
*.eot

注: 以下のコメントで取り上げられているように、キャッシュ マニフェストの NETWORK セクションでワイルドカードを使用すると、有効なマークアップにならない場合があります。絶対 URL を使用することをお勧めします。

TTF フォントを使用してキャッシュする IE10 の webpagetest の結果は次のとおりです。@font-face がブラウザ間で「防弾」に見えることを確認しました。

このセットアップには 2 つの小さな問題があります。

  • すでにローカルでフォントを利用できるクライアントは、それをダウンロードします (訪問者の約 5% しか持っていないため、これは私にとって大きな問題ではありません)。
  • エッジケース: マニフェストを読み取るが、なんらかの理由で ttf で動作しないブラウザーは、オンラインでは動作しますが、オフラインでは動作しません。この動作を示すブラウザは見つかりませんでしたが、何でも可能です。繰り返しますが、それを経験するのはごくわずかな割合のクライアントだけです。
于 2013-07-17T23:16:53.073 に答える