ウェブフォントの最適化 | Web | Google Developers
unicode-range によるサブセット化
スタイル、ウェイト、ストレッチなどのフォント プロパティに加えて、@font-face ルールではそれぞれのリソースでサポートされる 1 組の Unicode コードポイントを定義することもできます。これを使って、大きい Unicode フォントをより小さいサブセット（ラテン、キリル、ギリシャの各文字のサブセットなど）に分割し、特定のページでテキストの表示に必要なグリフだけをダウンロードできます。
@font-faceを用いれば、合字フォントデータを作成すること無く、既存フォントを組み合わせてHTMLページでの合字表現も可能になるのだけど、Web Fontで組み合わせた場合、2バイト圏はフォントデータサイズが大きいためダウンロード負担が高くなる。このため”unicode-range”が都度サブセットを生成してくれるとフォントデータサイズが小さくなることが期待できる。
ということで、試してみたのだけど、Win+Chromeではダウンロードしているフォントサイズに変化が見られない。まだブラウザが対応していないということなのか？
しかしそもそも、CSSで定義しただけで、こんなサブセット生成処理を都度サーバが実行するのだろうか？
ちなみにFont-PlusなどのWebFontサービスでも、ページ利用文字だけでフォントサブセットを随時生成して返却する仕組みがあるが、これはJSを用いてサーバ側にリクエストして処理する仕組みになっている。
色々調べていると、実はこの設定は指定フォントから利用グリフの抽出とマッピングだけを行っているのであって、ダウンロードするフォントデータの実体には全く影響がないような気がしているのだけど、どうなんだろう？
ちなみに合字を設定する場合は以下のような感じ
@font-faceでunicode-rangeを用いた合字設定
* 数字[0-9]を”Georgia”、英字[a-Z]を”Impact”で表示するフォントセット”hoge”を作る
* unicode-rangeは[0-9]:「U+0030-0039」、[a-Z]:「U+0041-007A」
* フォント名を”Meiryo”など既存フォントを指定して、オーバーライドも可能
* srcやunicode-rangeは”,”で連結して複数指定できるが、font-familyは無理っぽい（なので、”メイリオ”,”Meiryo”は別個に指定）
* font-familyの指定に「ファイル名でも指定できる」という情報もあったが、うまく動作しなかった。
@font-face {
font-family: 'hoge';
font-style: normal;
font-weight: 400;
src: local('Georgia');
unicode-range: U+0030-0039;
}
@font-face {
font-family: 'hoge';
font-style: normal;
font-weight: 400;
src: local('Impact');
unicode-range: U+0041-007A;
}
この設定の便利なところは合字の設定以外にも、通常のstyle指定で上書きできないattributes指定のfont-familyのフォントも変更できる部分。つまり、CSSの範囲だけでなく、そのページにおけるブラウザのフォント定義を上書きするような挙動をしてくれる。
個人的にはStyleのフォントファミリー指定は抽象化ラベルで定義して、@font-faceにまとめてしまったほうがシンプルなんじゃないだろうかと思ったりする。
まとめ
話が逸れたけれども、結局”unicode-range”によってフォントデータサイズは変えられないような感じなので、2バイトフォントで合字表現するには従来通りサブセットフォントを地道に自作するしか無さそう。
前述のWebFontサービスのサブセット生成APIを用いて、このやり方が使えるのかは不明。（WebFontサービスはJSが色々絡んでいるので、内部で何をしているのかよく分からぬ）
2バイト圏のフォント事情は相変わらず阻害されているなぁ・・・