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

Font.jsは任意のフォントを読み込んでテキストを描き出すJavaScriptライブラリです。

Web上での好きなフォントを使ってテキストを描画したい、そんなニーズに応えてくれるのがFont.jsです。Imageオブジェクトに似た、Fontオブジェクトとして作るのが特徴です。


最初の表示です。ボタンを押します。


こんな感じでフォントを埋め込んで使えます。

TrueTypeフォントを使っています。


こちらはOpenTypeフォントの例です。

実際のコードです。

Googleの提供するWeb Fontsに似ていますが、独自のTrueTypeやOpenTypeフォントが使えるのが利点と言えそうです。フォントデータはAjaxで取得するので、使っていない場合は読み込まれません。描画幅を取得するメソッドがあるなど、面白い使い方もできそうなライブラリです。

Font.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。


MOONGIFTはこう見る

Webサイトのデザインにおいて標準的なフォントではインパクトがなかったり、格好わるく見えるために画像化するケースは多々あります。HTML5によってWebの表現力が上がっている中、画像に頼らざるを得ないのはとても残念なことです。さらに日本語の場合は英字に比べて文字数が多いため、フォントのサイズも大きくなかなかWebフォントの普及は困難です。

とはいえWeb自体の表現力を向上するためにも今後、新しい技術が生まれるかもしれません(Webブラウザ自体がオープンなフォントを内蔵するなど)。効率的なオンラインにおけるフォント利用法を考え、実装してみるのは面白いかもしれません。

via Font.js – A Powerful Font Toolkit for JavaScript | Web Resources | WebAppers

Font.js: A Powerful Font Toolkit for JavaScript - Badass JavaScript

デモ:Font.js - finally a decent JavaScript object representation for fonts.

Pomax/Font.js - GitHub

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2