フォントでwebpackを使用する必要がありますか？

Question

私は自分のビルドツールとしてwebpackを使用しています。私のUIはBootstrapsフリーグリフコンを使用しています。私は現在、woff、woff2、eot、ttf、およびsvgをバンドルして、url-loaderを使用して自分のフォント（glyphicons）をバンドルしています。しかし、これは正しいことですか？

あなたのCSSでwoff、woff2、eot、ttf、svgの各フォントを指定すると、ブラウザーはどのフォントに最も適しているかを判断して残りのものをダウンロードします。しかし、webpackを介してフォントを束ねることは、すべてのブラウザ（およびデバイス、プラットフォーム）がすべてのフォントを取得することを意味します。

フォントをバンドルする必要がありますか、それとも、Webpackを使用してもブラウザをダウンロードして、それに適したフォントしか使用できないようにする方法がありますか？

Answer 1

url-loaderではなく、ファイルローダーを使用してください。ブラウザは余分な要求をする必要がありますが、それは通常大きな問題ではありません。

また、woff2とwoff（その順番）のみを使用することも検討してください。 Woffはおそらくsupported in all browsers you needであり、woff2はその上にある素晴らしいボーナスです。 eot、ttf、svgはこれ以上役に立ちません。

本当にフォントをインライン化したい場合は、インラインでしか使用できません。これはwoff2よりはるかに大きくなく、上記のように、どこでもうまく動作します。ただし、CSSを変更するたびにフォントが再度ダウンロードされることに注意してください。ファイルローダーではURLは変更されません。つまり、訪問者用のブラウザキャッシュから提供されるだけです。