どうも！chuckです。
みなさん、cssのfont-familyってこだわってますか？それともぜんぜん気にしてない？？
僕自身、font-familyはいつもどれを使うか迷います。で、いつも「CSS font-family 一覧」なんて検索しちゃってます。
というわけで今回は、font-familyの一覧をわかりやすく参照でき、しかも文字列にしてくれるツールを作りましたヽ(=´▽`=)ﾉ
DEMO
こちらが現在の制作物です。
http://chuck0523.github.io/front-end-coding/fontPicker/fontPicker2.html
font-familyの名前が書かれたボックスがずらーっと並んでいます。（もちろん、フォントは各々のfont-familyを使っています。）
こちらから使いたいフォントを選択していただくと、下のテキストエリアに文字列化して格納されます(｀･ω･´)ゞ
勉強になったこと
Textareaのリサイズ
下部のテキストエリアに関して。横方向にだけリサイズしたかったので。
どうやら、
resize : horizontal
と指定すれば良いみたいです。
テキストを選択状態にする
フォーカス時に全選択状態になるテキストエリアを作る - jQuery 日本語リファレンス
これ毎回忘れちゃう… jQueryで.select( )メソッドを使えばいいんですね！
文字列の置換
ボックスが非選択に戻った時に、テキストエリアからそのフォント文字列を消したかったので。.replace( )を使用。ただ、置換対象に変数を指定する方法は始めて使ったかも！
文字列の切り出し
slice(start, [end]) - jQuery 日本語リファレンス
同じく文字列操作。.slide(1)とすると、２文字目から末尾までを取り出してくれるんですね！第二引数をなくすと末尾指定したことになるんですね
あっ、font-familyはこちらを参考にしました↓↓
今回は和文フォントは大幅に割愛しました。
