web - 複数の.woffファイルを1つに結合します

Question

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

Answer 1

base64を使用してwoffアセットをCSSにバンドルできます。

@ font-face宣言の内部：

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

これにより、アセットのファイルサイズが大きくなる可能性があります。私の経験では、これは通常約20％で、同等のTTFファイルとほぼ同じサイズです。これの多くは、gzip対応サーバーで回復できます。トレードオフは私には受け入れられますが、YMMVです。

CSSにblobを埋め込むときによく推奨されるように、基本スタイルの後に引用されている個別のスタイルシートにすべてを保持します。そうしないと、クライアントはフォントが読み込まれるのを待ってから、意図したとおりにコンテンツが表示される可能性があります。

Answer 2

コメントする評判はありませんが、@ thumphriesの回答を更新するために、WOFFとWOFF2に次を使用できるようになりました。

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

url('data:font/woff2;base64,myVeryLongBase64StringGoesHere...');

参考までに、UNIXでは、組み込みbase64コマンドを使用して、次のようにbase64文字列を直接生成できます。

$ base64 myfont.ttf > fontbase64.txt

モバイルユーザーにとってレイテンシーが最大の問題であるため、これが望ましいと思います。サイトの合計サイズが大きくならないように、WOFF2を話さないブラウザー（ユーザーの8％未満）にURLフォールバックを追加します。そのようです：

url('data:font/woff2;base64,myVeryLongBase64StringGoesHere...'),
url('/fonts/myFont.woff') format('woff');