日本語のウェブフォントをまともに使えるようにするよ（サブセット化）#1

実際に最適化実装のエントリー
日本語のウェブフォントをまともに使えるようにするよ（サブセット化）#2

みなさん、ウェブフォント（WebFont）使ってますか？
WebFontは、とっても素敵なんです。

何が素敵かというと

• 作り込まれたフォントも画像を使わずテキストを入力すればOK！
  • メンテしやすい
• ただのテキストなので、CSSで色々できる
• ブラウザ間のフォントによる表示差違が無くなる
• 今まで画像でやっていた部分もテキストに置き換えられる
  • Retina怖くない

こんな素敵なメリットがありながらも、あまり使われていないように思えるのは、これに見合うデメリットがあるわけで･･･

と　に　か　く　重　い　:(

普通に使おうとしたら、3MB越えのフォントファイルとかざらにあります。
こんな時英語圏の方々が超羨ましいです :(

ただ、やっぱり日本語のWebFontは使いたいので･･･

ちょっと調べてみた

有名どころで

TypeSquare
http://typesquare.com/

モリサワ系のフォントなども提供しているサービスだが、もちろん有料 :(

有料ってだけあって、表示ページに利用されている文字種を取得しWebFontを動的に生成して返すなどの処理を行って軽量化を図っているらしい

さすがに、個人ブログにそんな大層なものを導入するわけにもいかないので他にも何か無いか見ていたところ、利用したいフォント文字種を入力して軽量化したフォントファイルを出力（サブセット化というらしい）するWebサービスがちょこちょこあるみたい。

M+Web FONTS Subsetter
http://mplus.font-face.jp/

ただこれだとページの更新とかがあった際に、毎回手動でフォントファイルを生成しないといけなくなるので、よろしくない

なんかないもんかと徘徊を続けていたら、あった

文字を制限した軽量な日本語 Web フォントを作成する方法
http://tech.nitoyon.com/ja/blog/2012/04/19/tiny-jp-webfont/

どうやら、FontToolsとかいうモジュールを使えばフォントの解析とサブセット化とかも出来るみたい

なので、作る

今回対象とするのは OpenTypeフォーマットのフォントファイル

OpenTypeについて

そもそも、普段あまり意識をしたことがなかったけど改めてフォントのフォーマット（OpenType）について、ちょっと見てみた

詳細には、OpenTypeフォーマットには2種類のタイプがあるようです。

• OpenTypeフォーマット
  • TrueTypeアウトライン（拡張子：.ttf）
    • 別称：TrueType
  • PostScriptアウトライン（拡張子：.otf）
    • 別称：OpenType
      • フォーマット名と名称が被るため、間違えやすいので注意

フォントファイルの中身について

何気なく使っているフォントファイルですが、その中には色々なものが入っているようです。

• グリフ情報
• アセンダやディセンダの大きさ
• 文字コード→グリフ の対応表
• フォントの名前や作者の情報
• ビットマップ
• その他etc...

フォントファイルの構造

上記で記載したフォントファイルの中身の情報は、実際にはヘッダーとテーブル（またはサブテーブル）で構成されています。

イメージ図

• フォントファイル
  • ヘッダー情報
  • グリフ情報テーブル
  • 対応表テーブル
    • マッピング情報サブテーブル 1
    • マッピング情報サブテーブル 2
    • マッピング情報サブテーブル 3
  • 作者情報

このように様々な情報が格納されていますが、今回行うサブセット化で重要になってくるのは、グリフ情報と文字コードとグリフのマッピング情報になります。

フォント界隈では、このマッピングデータのことをcmap、グリフ関連の情報についてはglyfと呼ぶそうです。

cmapとのマッピングについて

cmapとマッピングを行う際に、フォーマットというものが用意されており、これがまた色々あります･･･

• format2
• format4
  • Microsoftの標準のフォーマットで、使用されることが多く重要なフォーマット
  • 今回行う自前実装でもこのフォーマットを利用します
• format6
• format10
• format12

それぞれの詳細については追う元気がなかったので、ちょっと不明です。

これらの情報とFontToolsモジュールを合わせて、実際のフォントファイル最適化クラスの実装をしてみたいと思いますが、少し長くなりようなので次のエントリーに記載します。

次のエントリー
日本語のウェブフォントをまともに使えるようにするよ（サブセット化）#2

参考サイト

• TypeSquare
• M+Web FONTS Subsetter
• 文字を制限した軽量な日本語 Web フォントを作成する方法
• TrueTypeフォントのフォーマットを調べる その10