32321


[Font Awesome](http://fontawesome.io/get-started/)
をCDNから利用しようと思っているのですが、メールアドレスを登録して、送信されてきたコードを貼ろうとしたら、jsでした。  
cssだと思っていたので、ちょっとびっくりしました。

### 質問

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


CC BY-SA 4.0
2017-02-02T03:14:01.030
32320
2023-05-07T05:47:40.373
2023-05-07T05:47:40.373
3060
7886
question
javascript html css font
Font Awesome CDN は BootstrapCDN と何が異なる？


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

[code]

    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/...
    
[/code]

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

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

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

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


CC BY-SA 3.0
2017-02-02T03:55:42.947
32321
2017-02-02T03:55:42.947
8000
32320
answer


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

[Get Started](http://fontawesome.io/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が適用されませんが、アイコンフォントですからレイアウトが致命的に崩れることもなく、結果的に高速化されると考えていいでしょう。


CC BY-SA 3.0
2017-02-02T04:54:49.407
32322
2017-02-02T04:54:49.407
4236
32320
answer