unicode-range は指定することで、そのフォントで表示する文字の Unicode 範囲を指定することができます。
Webフォントのデザインテクニック05「混植してみよう」では、これを利用して混植表示を試みましたが、最適化でも利用することがあります。
unicode-range は、指定した範囲の文字が出てくるまで、そのフォントが読み込まれることはありません。
@font-face{
font-family: "Hiragana";
src: url("/path/to/Hiragana.woff2")
unicode-range: U+3041-3096, U+309D-309F; /* ひらがなの範囲 */
}
例えば、上記のように指定したとき、Web ページ上でひらがなが表示されるまでは Hiragana.woff2 は読み込まれません。
この性質を利用し、フォントをいくつかのチャンクに分けて unicode-range を指定することで、不要な文字種のフォントファイルを読み込まないようにすることができます。
例えば「記号、欧文、仮名、出現頻度の一番高い漢字、出現頻度が２番目に高い漢字・・・」を、それぞれ「kigou.woff2、latin.woff2、kana.woff2、kanji1.woff2、kanji2.woff2・・・」というファイルにし unicode-range をそれぞれ設定すると、難しい漢字がないサイトでは kanji2.woff2・・・以降はダウンロードせずに済む、といった要領です。
ダイナミックサブセッティングと比較すると、キャッシュが効くことがこの方法の利点です。
Google Fonts の CSS を見てみると、チャンクの分け方には独自の分類がありますが、上記のような仕組みを用いていることがわかります。
（LN）