Webフォントのやりかた【毎日更新その089】

Webフォントのやりかた

@font-face {
　font-family: フォント名;
　src: url(./フォントファイル名) format(”truetypeとか”);
}

ってやって

#body {
　font-family: 'フォント名';
}

とかってやります。

「日本語のフォントは重いからWebフォントはクソ」

ダイナミック・サブセッティングとかいう技術があるらしいです。サイトに必要な文字だけダウンロードするみたいなかんじのものです。

"webfont cjk" などで検索してみると、Ruby 用のライブラリがありました。

https://bitbucket.org/hxgdzyuyi/cjk-subsetter/overview

実装をみると下記のように動作するようです (なお、このライブラリは Rack ミドルウェアとして働きます。Rack ミドルウェアについては説明しません)。

HTML 中の、特定のクラスのついた要素を探す。
1 で探した要素で使われている文字を収集する。
sfntly ( https://code.google.com/p/sfntly/ ) を使って、2 の文字を含むサブセットを生成、保存。
3 で生成したフォントを参照するようレスポンスに style 要素を追加して返す。
非常にシンプルな実装なので、参考になると思います。

Webフォントのダイナミック・サブセッティングを実現するオープンソースのものはありますか？ - QA@IT

むずかしい。いつかはできるようになりたいです。