複数の.woffファイルを1つにまとめる

Question

私が管理しているウェブサイトには、フォントごとに1つずつ、複数の.woffファイルがあります。ローディング時間を節約するために、私はリクエストの数を減らしたいと思っています。これらのwoffファイルを1つのリソースに結合することは可能ですか？

Answer 1

woffアセットをbase64でCSSにバンドルすることができます。あなたの@ font-face宣言インサイド

：

url('data:application/x-font-woff;base64,myVeryLongBase64StringGoesHere...'); 

これは、資産のファイルサイズを増大させることができます。私の経験では、これは通常約20％です - これは、同等のTTFファイルとおおよそ同じサイズです。これの多くは、gzip対応のサーバーで回復できます。トレードオフは私にとっては受け入れられるが、YMMV。

ブロブをCSSに埋め込む際によくお勧めするように、別々のスタイルシートにすべて入れておきます。の基本スタイルの後にと書かれています。それ以外の場合、クライアントはコンテンツが意図したとおりに表示される前にフォントが読み込まれるのを待っている可能性があります。