ロゴをサブセット化したWebフォントに

Noticia Textやめて(嫌いになったわけではない)、Hのグリフだけ抜き出したKameronをロゴに使うようにした。Data URI化してCSSに埋め込んだ(3KB弱くらい)のでHTTPリクエストは増えていない。

最初SVGにしようと思って作業を始めたんだけど、スケーリングに関わらず一定のサイズの影(ここでは1px)を作る方法が思いつかなかった。単に影をつけるだけならInkscapeにフィルターあるので簡単なんだけど、スケーリングするとグッチャラグッチャになる。フィルターはスケーリングさせないオプションとか普通にありそうだけど、Webフォント+CSSでできることを知っていたので調べるの面倒になった。


Google Web Fontsにはサブセット化する仕組みが二種類用意されてて、textパラメーターを使うと文字単位でサブセット化できるので、この機能をそのまま使っても良い。けど、この機能を使う場合と複数のフォントをまとめてリクエスト出来なくなるという制限があるので、HTTPリクエストのためにはそのまま使うのではなく前述のようにData URI化することも考慮した方が良いと思う。ライセンスの確認は必要。