フォントの恐ろしいアイコンの読み込みの遅延を最小限に抑える方法は？

Question

私は、WebページでBootstrap CDNのFont AwesomeのミニCSSをリンクしました。問題は、目に見える遅れの後、アイコンがページコンテンツの残りの部分よりも遅く現れることです。

この遅延を取り除く最善の方法は何ですか？ （参考、このCSSファイルはすでに他のすべてのCSSとJSリンクの上に置いてあります）

Answer 1

ロード時間の短縮はほとんどありません。そのフォントのすばらしいCSSファイルは、ページが読み込まれた後に読み込まれる外部フォントファイルへのパスを参照します。あなたは、フォントの素晴らしいウェブサイト上の遅延を見ることができます：https://fortawesome.github.io/Font-Awesome/icons/

@font-face { font-family: 'FontAwesome'; src: url('../fonts/fontawesome-webfont.eot?v=4.5.0'); src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.5.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.5.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; }

あなたは、base64でフォントをエンコードし、右のサイトのCSSでそれらを含めることができます。これは実質的にあなたのサイトのCSSの読み込み時間を増加させるが、それはフラッシュを取り除くだろう。それはすべてのブラウザで動作しないかもしれませんが、私はそれをお勧めしません。

あなたのサーバー上で素晴らしいフォントとフォントを直接ホストすることができます。 CDNがレイテンシの原因になっている可能性があります。

Answer 2

は

LESS）データ-URI（へ）（URLを変更してください：

data-uri('../fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'), 

http://lesscss.org/functions/#misc-functions-data-uri