Webサイトでフリーフォントを使う　―Webフォントとtypeface.jsを比較して

ウェブサイトで使われるフォントについてちょっと考えてみました。 ウェブページで使用されるフォントは、通常ユーザーが使用している環境に依存します。最新のWindowsOSなら最初からメイリオフォントが入っているし、MacOSならヒラギノフォントが入っています。その一方、Windowsには最初からヒラギノフォントもOsakaも入っていないし、同様にMacOSにＭＳＰゴシックやメイリオは入ってません。また、サイト製作者が自分のページで使いたいフォントがあったとしても、ユーザーの環境にそのフォントがインストールされていなければ、ユーザーはそのフォントを見ることができません。 しかし、CSS3がモダンブラウザに実装されて以降は、Webフォントを利用することで、サイト製作者が望むフォントですべてのユーザーにページを見てもらうことができるようになりました。ただし、このWebフォントですが、和文フォントを利用するとき障害になることがいくつかあります。 ひとつは和文フォントのサイズが大きすぎることです。英文フォントはアルファベットと数字、記号だけの小規模の文字セットで済むので、英文フォントの多くが100KBかそれに満たない小さなサイズです。しかし、日本語の場合、千文字以上の漢字セットが必要となるため、どうしてもフォントデータが大きくなってしまいます。和文フォントの多くが8MBとかいう桁違いのサイズです。サイト閲覧者に8MBものデータをダウンロードさせるのは現実的に厳しいことで、さらにダウンロードが終わるまで（自分のADSL回線では8MBのダウンロードに1分前後かかりました）フォントが表示されないという問題があります。 ただ、これはWebフォントを自分のサーバーに置いて利用するケースです。通常、サイト製作者はWebフォントをTypeSquareのような専門のWebサービスを通じて利用します。この場合だとページで使われる文字数に応じたサイズのフォントデータをダウンロードするだけで済むそうなので、和文フォントのサイズ問題は解消されます。とはいえ、これらのサービスは通常有料です。 もうひとつは、ささいな問題かもしれませんが、Webフォントは文字サイズを小さくすると、アンチエイリアスがかからずギザギザに見えることがあり、小さい文字で表示しようとすると見栄えが悪くなる可能性があることです。これについてはこの後ほどtypeface.jsを利用したページとの比較で検証していきます。 Webフォントではないですが、好きなフォントで書かれたページを実現するためにtypeface.jsを使用する方法があります。実際にフリーフォントで書かれたページを作ってみました。瀬戸フォントという加工・改変OKなフォントです。 ⇒typeface.jsを使ったフリーフォントのページ　最新のFirefox、Chrome、IE9で動作確認 このデモページでは、瀬戸フォントのデータが入ったJavaScriptファイルを読み込んでいます。450KBと少し重めのデータですが、文字データをひらがな・ヒラガナと英数字・記号にしぼっているため、このサイズで済んでいるともいえます。漢字セットをフルに入れるとやはりWebフォントと同様に数メガバイトになるため実用に耐えません。 ただ、typeface.jsは、ページで使用する文字数にしぼってフォントデータを書き換えることができるので、手間はかかりますが読み込むフォントデータのサイズを実用範囲内に小さくすることが可能です。typeface.jsのメリットはもうひとつあって、それは文字をHTML5のCanvasで描画していることです。文字描画にアンチエイリアスがかかるので、文字が小さくなっても見栄えが極端に悪くなるということはありません。 一方でデメリットもあります。まず、フォントデータを作るのに手間がかかることです。下記にtypeface.jsを導入する一連の手順を書いておきます。 もうひとつは、文字列をコピーするときの文字列選択に問題があることです。typeface.jsはHTML5のCanvasで文字を描画しているので、本来文字列の選択はできません。ただ、実際にはスクリプトで文字列選択ができるように無理やり制御しているので、擬似的に可能となっています。ところが、こちらで何度か文字列選択とコピーをしてみると、選択した分の文字列がコピーされていなかったりと不具合がみられます。スクリプト自体が日本語に対応していないことも原因かもしれません。 また、typeface.jsはアンチエイリアスがかかるものの、文字サイズを小さくしすぎると、その効果で文字自体が薄く見えてしまうことがあります。次にWebフォントの文字とtypeface.jsの文字を文字サイズごとに比較してみました。動作環境はWindows7、Firefox19.0。 Webフォント　13px typeface.js　13px Webフォント　16px typeface.js　16px Webフォント　21px typeface.js　21px Google Chromeでは大き目の文字サイズにしてもWebフォントのギザギザが直らない模様。 Webフォント25px typeface.js　25px typeface.jsの導入方法 １、フリーフォント（TrueTypeかOpenTypeであること）を見つける。JavaScriptファイルに変換するので、規約で加工・改変が可能かどうか確認しておく。 ２、typeface.jsのサイトでフリーフォントデータをJavaScriptデータに変換してもらう（和文フォントは変換に結構時間がかかります）。 ３、フォントセットに組み込む文字セットを指定して（英数字・記号・漢字・カナなど）ダウンロードする。文字セットの中にはチベット文字などまず使うことがないものが多く含まれているので、必要最低限の文字セットにすることでダウンロードサイズを小さくできる。 ４、typeface.jsファイルをダウンロードする。 ５、HTMLエディタを開き、フリーフォントを使用するページにtypeface.jsと、ダウンロードしたフォントデータ（JavaScript）を埋め込む。 ６、フリーフォントを使うHTML要素のfont-familyをフリーフォント名に。またその要素のclass属性を”typeface-js”とする。 ７、ローカルでページを開いて確認する。

 - JavaScript/Ajax, ブラウザ JavaScript, typeface.js, Webフォント, フォント