2011-12-14

&だけ別のフォントで置き換える

Google Web Fonts APIのtextパラメーターを利用すると、ダイナミックにフォントのグリフを削減できます。本来はファイルサイズを軽減してモバイル向けに最適化するというような目的で設けられているパラメーターのようですが、これを利用して&だけ他のフォントから持ってくるなどということができます。昔どっかで書いた奴の焼き直しです。

Demo: Google Web Fonts' text Parameter

このデモではOpen Sans Condensedをベースにして、&だけRochesterで置き換えています。

<link
  rel="stylesheet"
  href="http://fonts.googleapis.com/css?family=Rochester&amp;text=%26">
<link
  rel="stylesheet"
  href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300">

フォントのリクエストでtextパラメーターを付けるだけなので簡単ですね。もちろん指定する文字列はURLエンコードする必要があります。

.test h1 {
  font-family: "Rochester", "Open Sans Condensed", sans-serif;
}

CSSではこのように&のみを持つRochesterを前にすれば、&以外の文字ではOpen Sans Condensedがフォールバックとして選択されるます。そのためHTMLに追加でマークアップする必要はありません。

アンパサンドかわいい。