カテゴリー
Design Develop

@font-faceにおけるunicode-rangeによるサブセット化

ウェブフォントの最適化  |  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を用いてサーバ側にリクエストして処理する仕組みになっている。
色々調べていると、実はこの設定は指定フォントから利用グリフの抽出とマッピングだけを行っているのであって、ダウンロードするフォントデータの実体には全く影響がないような気がしているのだけど、どうなんだろう?
ちなみに合字を設定する場合は以下のような感じ

カテゴリー
未分類

PICTOS SERVER

Pictos

That’s right. For the first time ever you can now build your own icon fonts with the Pictos Server! It’s easy: choose any icon in the Pictos Library and assign a keyboard key that will correspond with that icon. Use as many or as few icons as you’d like, even change them on the fly!

PICTOSがアイコンフォントのWeb fontsサービスを開始しました。
解像度の違うスマホやらタブレットのアイコンはスケールによって画像を切り分けたり、オリジナルのフォントを作成して対応したりと対応が煩雑なので、これはかなり使えそうな気がしています。
コースは

Personal Plan
$19 / Year
50,000 Monthly Pageviews
Basic Plan
$49 / Year
500,000 Monthly Pageviews
Pro Plan
$99 / Year
1,000,000 Monthly Pageviews

な感じ。
Pro以外は12個までしかアイコン設定できないみたいだけど、12個もあれば十分かしら?
PV制限は正直なんとも言えない。
懸念点としてはサブセット化のタイミングかなあ?
事前にビルドするタイプだと問題ないと思うけど、動的生成だとDOMに入れておかないといけなくて、記述の仕方に一工夫いるのかもしれない。Helveticonsもやってくれればいいのに。
類似:
Web Symbols typeface
Social media Icons pack | Fontfabric™
Modern Pictograms – The Design Office