過去に何度かウェブ製作時のCSSでのフォント定義のヘルパーサイトを紹介しましたが、こいつはその中でも決定版と言える内容。わたくし常用フォルダに早速突っ込みました。仕事でも使えそう。以下に簡単に解説をしておきます。

概要：CSSの各指定によってフォントがどう変化するかを実際に見ながら、CSSでのフォント定義を吐き出すサイト。

基本的な使い方：まずはサイト全体のベースフォントサイズを指定しましょう。デフォルトは10pxになってます。実際のサイト製作ではhtmlかbodyあたりでfont-sizeで定義しておきましょう。
ベースフォントサイズが決まったら、下にある各種プルダウンメニューをいじくってフォントを定義。3ペインある事からも分かるように、3セット作れます。font-face選択プルダウンは2つあって、その内上のものは一般的なフォント設定です。プルダウン内上部がウィン＆マック共有のフォントで、その下がそれぞれウィンのみ、マックのみのフォント。通常は共有フォントから選びましょう。2個目のプルダウンはユーザーのローカルマシン内のフォント一覧。マックユーザーの人であればヒラギノとかが出てきますが、チョイスしても反映されません。ヒラギノの指定は諦めましょう。
またページ上部のSample Text欄を修正する事でサンプルテキストを変更できます。こちらはちゃんと日本人も通るようになってますので、サイト製作中のテキストを突っ込んでみて確かめるのもオッケー。

CSSの出力方法：フォントの定義ができたらページ右上の「Get CSS」右のリンクをクリックすることで、一番左のペインから1st, 2nd, 3rdという順番で別個にCSS定義のテキストを出力できます。

自分の場合仕事で作るサイトではフォント関係のCSSだけ別ファイルにして、異サイトでそのファイルを使い回す（共有はしない）事が多いので、次あたりでこのサイト使って根本から書き直そうかと思ってます。うーん便利だ。

Typetester – Compare fonts for the Screen >>