SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 社員募集 ...

Font Awesome のCSS版とJS版は何が違うの?

問題

Font Awesome に、CSS版(Using Web Fonts with CSS )とJS版(Using SVG with JavaScript、SVG版)があるけど、何が違うの?

答え

CSS版は、CSS+Webフォントになる。

JS版(SVG版)はJS+SVGになる。

CSS版

JS版(SVG版)

どちらが良いのか?

読み込むファイルがJavaScript 1ファイルで済むので、モダンなブラウザではJS版でよいでしょう。

<script defer src="/your-path-to-fontawesome/js/all.js"></script>

IE10など幅広い環境に対応する必要がある場合、ファイル数を気にしない場合、勝手にHTMLが書き換えられると困る場合、JavaScriptに依存しないスタイルシートだけの素直な実装がよい場合はCSS版でよいでしょう。

<link href="/your-path-to-fontawesome/css/all.css" rel="stylesheet">

ファイルサイズの面では、JS版の全部入りの all.js で1MB以上あるので、Webフォントのファイルサイズと比較すると、似たり寄ったりな気がします。

変わったアイコンは使わない場合は、基本的なものだけに限定すると容量を節約できます。all.js 以外の小さいJSを読み込むようにします。

all以外を使うときは、個別のを読んだ後に fontawesome.js を読み込むこと。regular.min.js + fontawesome.min.js のみにすると 141KBで済みます。

 1.2M    all.js
1.1M all.min.js
427K brands.js
420K brands.min.js
33K conflict-detection.js
14K conflict-detection.min.js
77K fontawesome.js
36K fontawesome.min.js
105K regular.js
101K regular.min.js
575K solid.js
562K solid.min.js
18K v4-shims.js
15K v4-shims.min.js

関連するメモ

コメント