Web上での日本語フォント

CSS JavaScript

自分の好きな日本語フォントをWebページ上で表示したいときってありますよね？

Safari3.1の場合Webフォントという機能が実装されています。 http://builder.japan.zdnet.com/sp/css-firefox-safari/story/0,3800083423,20370308,00.htm

これは全部のフォントを読み込んでいるので重いんですよね。

他の実装としてはsIFRやBeautifulJapaneseKitなどのFlashを利用したアプローチがあります。

BeautifulJapaneseKit http://www.ideamans.com/tool/beautifuljapanese.php

ただしこれもフォントを埋め込んだFlashになりますので、結構重いみたいです。
今回はゲームなどで利用している画像を利用したアプローチを試してみました。

概要

フォントをあらかじめ画像に変換して、CSSで表示します。
ゲームなどで利用されている画像方式になります。肝としてはbackground-positionを利用して大きな画像から切り出して表示します。

実際のサンプルはこちら→ http://akira.info/labs/webfont/

利用フォント

今回はあくあフォントとアームドバナナフォントを利用させていただきました。ありがとうございます。

あくあフォント http://aquablue.milkcafe.to/
アームドバナナフォント http://millimeter.cool.ne.jp/armedbanana.html

フォント画像作成

ここはWindowsで昔に作成したアプリを利用しました。。。
内容はテキストファイルを読み込んで、その文字をWindowsアプリ上から画像に出力するだけになります。

フォント画像加工

画像ファイルの透明色の設定をしてＰＮＧで保存します。
第一水準の漢字で24ドットの場合で82.7Kになりました。2色で保存しているので非常に小さいです。

第二水準まで入れたら画像が300Kぐらい、切り出しが400K以上になりそうです。。。

あくあフォント http://akira.info/labs/webfont/font.png
アームドバナナフォント http://akira.info/labs/webfont/font2.png

切り出し座標作成

UTF8の文字コード番号で切り出し座標を作成していきます。
ここはPHPで作成しました。

.f.c22258{background-position:-1009px -169px;} /*囲*/
.f.c22839{background-position:-1033px -169px;} /*夷*/
.f.c22996{background-position:-1057px -169px;} /*委*/
.f.c23041{background-position:-1081px -169px;} /*威*/
.f.c24847{background-position:-1105px -169px;} /*意*/

こんな感じで文字コードでスタイルを作成していきます。
このファイルが一番大きく111Kになります。。。

ただしこのファイルはフォントのサイズが一緒であれば、読み込む画像だけ変えれば他のフォントでもキャッシュされると思います。

まあ、同じサイズの複数フォントを同一ページで使うのはデザイン的に問題ありそうですね。

切り出し座標スタイルシート http://akira.info/labs/webfont/font.css

スタイルシート設定

二つのspanを重ねて下のspanの背景画像に切り出したフォントを表示します。

その上に透明の文字を置きます。この透明な文字がテキストコピーで利用されます。完全に透明にすると選択したときにわからないので、すこし不透明にします。

body {
  background-color:#888888;
}

/* 上にかぶさっている不透明の文字 */
.char {
  width:24px;
  height:24px;
  font-size:24px;
  display:inline;
  color:#888888;
  zoom: 1;
  filter: alpha(opacity=15);
  -moz-opacity:0.1;
  opacity:0.1;
}

/* 表示される画像フォント */
.f {
  background:url(font.png) no-repeat;
  display:inline;
  font-size:24px;
}

自動置換処理

JavaScriptでブラウザ上で上記のフォントへのスタイル設定を動的に行います。
置換前に関しては通常の本文になりますのでサーチエンジンから拾われる場合には処理前の文章になります。

また、既存のシステムに組み込む場合にも結構簡単に入ると思います。

処理はspanなどで囲まれた文字を文字単位に分解して、utf-8の文字コード番号のスタイルを割り振っていきます。

function setFont(textid, fontname){
var str = document.getElementById(textid).innerHTML;

var data = str.split("");

var print_str = "<span class=fontbase>";
var flag = 0;
for (var c in data){
    if( data[c] == '<' ){
        flag = 1;
    } else if( data[c] == '>' ){
        flag = 2;
    } else if( flag == 2 ){
        flag = 0;
    }

    if( flag == 0 ){
        print_str += "<span class='" + fontname + " c" + data[c].charCodeAt(0) + "'><span class='char'>" + data[c] + "</span></span>";
    } else {
        print_str += data[c];
    }
}
print_str += "</span>";

document.getElementById(textid).innerHTML = print_str;
}

タグが入っていたら閉じタグまで無視します。この辺は最終的にはセキュリティー的にもう少し厳しく処理した方がよいと思います。

サンプル

http://akira.info/labs/webfont/


最後に

実用にはもう少し手を入れる必要がありますが、思ったより簡単に処理が可能なようです。
半角の対応と一部表示されない文字がありますので、もう少し手を入れる必要がありそうです。

あとブラウザのフォントサイズとか変えないでください（笑）