Webサイトを見ていると、文字を画像に置き換えたサイトを見ることがある。思い描いている見せ方をそのまま表示させたいときなど、デザインを重視するサイトでよく見られる工夫だ。しかし問題はそのメンテナンス性の悪さだろう。

奇麗に文字が表示されるようになる

それに適切に説明文を入れておかないと文字読み上げブラウザなどでは何も情報が得られなくなってしまう。そうした煩雑さから解放されるライブラリがこれだ。

今回紹介するオープンソース・ソフトウェアはtypeface.js、文字をSVG画像に変換するJavaScriptライブラリだ。

typeface.jsは指定した文字をそのままcanvasタグを使ったSVG画像に変換する。CSSを使って文字装飾を行うことができ、太字/イタリック/色変更を変更できる。他にもfont-stretch（横幅）、文字間隔、行の高さなどを指定することが可能だ。

選択すると文字全体が選ばれる

対応するブラウザはFirefox 1.5以上、Safari 2以上、IE6以上となっている。文字情報をJavaScriptで変換しているだけなので、対応していないブラウザであればそのまま文字を確認できる点がユーザビリティ上も優れている。

公式サイトではHelvetiker、Optimer、Gentilisといったフォントが一緒に配布されている。さらに任意のTrueTypeフォント（日本語は不明だが）を変換することもできるようだ。typeface.jsを使えばデザイン性の高さとメンテナンス性を併せ持った柔軟なサイト作りができそうだ。

typeface.js – Rendering text with Javascript, <canvas>, and VML

　http://typeface.neocracy.org/