ITエンジニア/デザイナ向けにオープンソースを毎日紹介

Web Fontを使うとこれまで画像で作っていたロゴのようなものをテキストで表現できたり、さらにアイコンフォントのように大きさや色を自由に決められるアイコンが使えるようになります。

問題点としては画像一つに比べるとデータ量が多く、サイズが大きくなってしまうことでしょう。そこで使ってみたいのがlocalFontです。

localFontの使い方

こちらがメインページです。woff/woff2/ttfフォントをドロップします。
こちらがメインページです。woff/woff2/ttfフォントをドロップします。

そうするとスタイルシートとJavaScriptでの設定が表示されます。
そうするとスタイルシートとJavaScriptでの設定が表示されます。

複数指定も可能です。
複数指定も可能です。

localFontはlocalStorageを使ってWeb Fontのデータをキャッシュするためのコードを表示します。localStorageは5MBまでの制限はありますが、キャッシュよりも効率的、高速な表示が期待できます。Web Fontを使っているならばlocalFontを使って乗り換えても良さそうです。

localFontはHTML5/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

localFont - Implement localStorage web font caching in seconds

jaicab/localFont

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2