ウェブフォント

下記の記事は内容が古くなっていますので、検索でこられた方はhttp://d.hatena.ne.jp/niming538/20110403をご覧下さい。

      • -

前回書いたwoff(web open font format)フォーマットを使った自作フォントによるホームページに関連して、解説というか、自分の頭の整理をかねて書きます。


通常、ウェブはパソコンにあるフォントで表示されます。自分で作ったフォントで表示するための技術としてcssファイルで@font-faceというコマンドを使ってフォントのありかを指定すればそのフォントがパソコンにダウンロードされて表示されるという方法は規定されていたのですが、そのまま実装するとフォントが垂れ流しになってしまって著作権問題が生じます。そこでダウンロードしただけではパソコンで使えない形に変換して使うということでwoffというフォーマットが提唱されました。


今回firefoxが3.6で対応したのでこれを使って日本語中国語英語を表示してみたのが前回の私の記事です。


ファイアフォックスに続いて、google chromeinternet explorer 9operaが対応することを表明しているので、たぶん標準として確定だと思います。


今回やってみての経験を忘れないうちに書いておきます。


1.ttfのフォントをwoffに変換するサービスを行っているサイトがあるが、unicodeのフル対応したフォントだと数メガになり、オンラインでの変換はできなかった。
2.sfnt2woffというttfからwoffに変換するツールがあり、Unix/Linuxならば自分でコンパイルしてインストールすることもできるし、バイナリでwindows版、mac版がある。今回windows版で作ってみたのと、Unix上でコンパイルして作ったツールで作ってみたものはまったく同じwoffが出来た(大きさなど)ので信頼性が高いと思う。できあがったwoffフォーマットのフォントはttfのときの半分くらいの大きさになります。
3.http://www.bp7e.com/tsfont.htmlというサイトはdreamhost上の実験サイトです。
4.このサイトを開いてソースを見ると、スタイルシートとしてtsfont.cssを指定しています。
従って、http://www.bp7e.com/tsfont.html
http://www.bp7e.com/tsfont.css
の両方をメモ帳かエディタで見ていただければ、今回使った技術のすべてです。
5.フォントはTTEditというツールを使って作りました。一旦全部カラにしてからペインタで一文字ずつかいたものをペーストしていますので、著作権問題はクリアしていると思います。めんどくさそうですが英文フォントは数時間でできますし、日本語も1週間ほどでできます。大変なのは中国語の繁体字簡体字で、これが数万あて、簡体字はたぶんほとんどが使われていない字も含まれているので全部やる意味がないので中断してます。
6.いずれにせよ、日本語は日本語だけで完結していないので、各種のフォントをすべて欲しいところで、さらに著作権フリーを主張するためには手書き、それもできるだけ下手な手書きがよいだろうというのがアイデアです。
7.筆やペンで書いた字をスキャナーで取り込んで貼り付けていくことも可能なので、tsfont.ttfをベースにみんなでいろんなフォントを作ることができると思います。
8.woffで日本語や中国語を表示するのはネットのトラフィックを増やすから止めるようにとの意見があります。これは一理ありますので気に留めています。
9.一理ありますが、世の中の方向はパソコンに依存しないコンピューター環境の実現に向けて動いていますので、フォント問題はけっこう大きいと思います。


きょうはここまで。