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
という……。