0

Font Awesome をCDNから利用しようと思っているのですが、メールアドレスを登録して、送信されてきたコードを貼ろうとしたら、jsでした。
cssだと思っていたので、ちょっとびっくりしました。

質問

・なぜCSSではなくJSなのでしょうか?
・使用しても大丈夫でしょうか?
・「BootstrapCDN」との違いは?
・「BootstrapCDN」経由で使用する場合はバージョン指定必須だけど、「Font Awesome CDN」はバージョン指定せずとも常に最新を使用できる?
・それぞれ「メリット」「デメリット」等あれば教えてください

2 件の回答 2

3

なぜCSSではなくJSなのでしょうか?

Get Startedにも

Async your icons
Want to speed up your page loads? So do we. Have your icons load in the background so your site loads faster.

と説明されています。

というのもJavaScriptに関しては<script async>を使うこと非同期に読み込むことができますが、CSSファイルを読み込む<link>要素にはそのような指定ができず必ず同期的に読み込むことになります。これをレンダリングブロックCSSと呼びます。

しかしJavaScriptから動的に<link>要素を生成した場合、ブラウザーはバックグラウンドでダウンロードする仕様です。もちろん読み込まれるまではCSSが適用されませんが、アイコンフォントですからレイアウトが致命的に崩れることもなく、結果的に高速化されると考えていいでしょう。

2

登録して届くメールに次のような記述があるかと思いますが、

1. Copy your code & place near the top of your HTML's <head>`
2. Use any of Font Awesome 605+ icons (http://email.tl.fortawesome.com/c/...) in your project's UI
3. Register Your Font Awesome CDN Account at http://email.tl.fortawesome.com/c/...

3に書かれているURLから Font Awesome CDN のアカウントを作成することができ、管理画面にアクセスできるようになります。そこで新しい埋め込みコードの発行や、埋め込みコードごとに使うバージョンやその他の設定、アイコンの使用状況?も見ることができるようです。

メールの冒頭に書かれている埋め込みコードはとても長いURLでちょっと奇妙ですが、このURLをブラウザで開いてみると、前述の管理画面で発行するものと同じ短いURL(ID付き)にリダイレクトされることがわかります。

というわけで BootstrapCDN などのファイルを配信するだけのCDNとは異なり、より多くの機能を備えたサービスと考えればよいかと思います。それらの機能を必要としないなら、他のCDNを利用したほうがよりパフォーマンスは出る可能性はあります。

(CSS直接でいいのにJSを噛ませているという点以外にも、他のサイトとキャッシュを共有できない、そもそも同じURLで内容を変更できるようにmax-age=0,must-revalidateとしている、といった点でペナルティがあるかと)

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。