CSS:フォントファミリーの見え方を比較するためのページ

フォントファミリーは何が良いの?

いくつかのフォントを指定した文章を、MacやWindows PC、スマホなどで見て考える材料にするためのページです。

ページ全体のCSS書類ではフォントファミリーの指定を外し、テキスト文に直接 style="font-family: フォント名"を書いてフォントを指定しています。

ソース例:

<p style="font-family: 'メイリオ','Meiryo';"><b>薔薇と麒麟</b></p>

<p style="font-family: 'メイリオ','Meiryo';">春はあけぼの。夏は夜。</p>


b { font-weight: bold;}

ページを見ている機器に指定しているフォントが入っていないときは、ブラウザの標準フォントで表示されます。

フォント名はファミリー名の日本語と英語を使用。Mac OS X のFont Bookより取得しました。

フォントファミリーの指定なし

薔薇と麒麟

春はあけぼの。夏は夜。雨ニモマケズ風ニモマケズ
1234567890 ABCDEFG 1234567890

sans-serif(ゴシック体)

薔薇と麒麟

春はあけぼの。夏は夜。雨ニモマケズ風ニモマケズ
1234567890 ABCDEFG 1234567890

serif(明朝体)

薔薇と麒麟

春はあけぼの。夏は夜。雨ニモマケズ風ニモマケズ
1234567890 ABCDEFG 1234567890

ヒラギノ角ゴ ProN

薔薇と麒麟

春はあけぼの。夏は夜。雨ニモマケズ風ニモマケズ
1234567890 ABCDEFG 1234567890

ヒラギノ丸ゴ ProN

薔薇と麒麟

春はあけぼの。夏は夜。雨ニモマケズ風ニモマケズ
1234567890 ABCDEFG 1234567890

ヒラギノ明朝 ProN

薔薇と麒麟

春はあけぼの。夏は夜。雨ニモマケズ風ニモマケズ
1234567890 ABCDEFG 1234567890

メイリオ

薔薇と麒麟

春はあけぼの。夏は夜。雨ニモマケズ風ニモマケズ
1234567890 ABCDEFG 1234567890

MS ゴシック

薔薇と麒麟

春はあけぼの。夏は夜。雨ニモマケズ風ニモマケズ
1234567890 ABCDEFG 1234567890