ゴシック体フォントのブラウザ解釈を検証するページ

動的に Font Family を変更するサンプル。

左のフォント一覧からチェックを入れると、そのフォントが右側のサンプル文章に適用される。
ドラッグするとフォントの順序を入れ替えることも可能。
どのような font-family が指定されているかはページトップに表示される。
青背景のサンプル文章は検証結果から導いたオレオレパーフェクト設定を適用しているモノ。「Toggle Perfect」ボタンで表示切替可能。
赤背景のサンプル文章は Apple システムフォントのみを適用しているモノ。iOS だと和文にもシステムフォントが適用されることが分かる。「Toggle AppleSystem」ボタンで切替可能。
Windows・Mac・iOS の標準フォントからゴシック体のものを列挙。
デフォルトの並び順の大方針は「Apple 向け → Windows 向け」で「日本語表記 → 英語表記」。
「"Yu Gothic M"」は、通常の游ゴシックが細く見えてしまう Windows 向けに @font-face を適用したカスタムフォント。
本検証ページの実装には jQuery・jQueryUI (Sortable)・jQuery UI Touch Punch (スマホ向けに Sortable を拡張) を使用。