Google Web Fontsの全書体を一気にプレビューするツールを作った。公式のFont Previewerを使ってるとサンプル文字列が突如リセットされたりとかアレだったので……。
使い方は左の入力ボックスにプレビューに使う文字列を、右のテキストボックスにフォントサイズを入力してボタンをクリック。クリック！ 手抜きなのでEnter押してもダメ！ すると下にズラッとプレビューされる。太字にしたりスモールキャプスにしたりとかの細かいスタイル指定はFirebugやDeveloper Toolsとかでやれば良いと思う。px単位の数字で.previewというクラスのスタイルをいじれば反映される。contenteditable使ったスタイル編集機能とかなら付けてもいいかもしれない。
ソースを見ればわかる通りYQLで公式のFont Previewerをスクレイピングしてフォント名一覧を入手し、あとは適当に出力しているだけ。Font PreviewerのHTMLが変わらない限り新たにフォントが追加されても反映されるはず。
既知の問題はfont-familyでジェネリック・ネームを指定していない関係上、フォールバックされる部分(日本語とか)が制御出来ないこと。Font Previewerのページやフォント名からserifかsans-serifかとか判断できないのでどうしようもない気がする。
プレビューにフォントへのリンクを追加したり、プレビューのスタイルのライブ編集機能を付けたりしておいた。だいたい便利になった気がする。あとはコピペ出来るようにlink要素をどっかに表示してやるとかくらいか。
関係ないけどstyle要素にcontenteditable属性を追加して実現するCSSのライブ編集機能(元ネタ)は既存のスタイルしか変更できないようだ。つまり、
<style contenteditable>body {
background-color: green;
}</style>だとbackground-colorプロパティしかリアルタイムに変更できない。覚えておく……必要は全くなさそう。
一部のフォントがlightとか800とか文字セットとか込みで指定しないとダメなので、目先を変えてHTML内にあるfontsオブジェクトをeval()で拾って利用することにした。これでジェネリック・ネームも拾える……と思ったら全部serifという……。