[ CSS ] フォントファミリー ( font-family ) を指定する

ウェブページのフォントをメイリオにしたくなって、CSS を設定してみました。関係ないのかも知れませんが、ウェブページの文字コードは UTF-8 です。

フォントファミリーの指定順序

フォントファミリーを指定する順番によって、フォントが適用されない場合があったのでメモ。

font-family:
    'Lucida Grande',
    Verdana,
    'ヒラギノ角ゴ Pro W3',
    'Hiragino Kaku Gothic Pro',
    Osaka,
    'メイリオ',
    Meiryo,
    'ＭＳ Ｐゴシック',
    sans-serif;

とりあえず、上のような感じに指定してみたんだが、Windows Vista + Internet Explorer 7 でメイリオにならない。

font-family:
    'メイリオ',
    Meiryo,
    'Lucida Grande',
    Verdana,
    'ヒラギノ角ゴ Pro W3',
    'Hiragino Kaku Gothic Pro',
    Osaka,
    'ＭＳ Ｐゴシック',
    sans-serif;

に修正すると Windows Vista + Internet Explorer 7 でもメイリオになった。メイリオを指定する前に欧文フォントを指定するとマズいのかな？

それから、Office 2008 for Mac ではメイリオがデフォルトインストールされるんだそうな。

キレイな欧文フォントと日本語フォントの組み合わせ

livedoor Reader で見出しのフォント設定は、下記の様な CSS になっていて、ボールド状態の英語と日本語が混在した場合、読みやすい。

font-family: Arial, Helvetica, sans-serif;

14px 程度の MS P ゴシックにボールドをかけても、横に１ピクセルしか太らないので、欧文フォントも細い方がバランスが取れて良いのかも？

ついでに、欧文フォントと日本語フォントの組み合わせで、どれがキレイかサンプルを作ってみた。

• [ CSS ] フォント指定 ( font-family ) のテストページ

Mac 環境で表示する場合、Lucida Grande + ヒラギノ角ゴ Pro W3 が個人的に良さげ。

関連する記事

• 日本語 ClearType フォント「メイリオ」 (0)
• Windows Vista で IE 5.5 とかの表示確認ができる - IETester (1)
• Firefox のデフォルトフォントを ｢ メイリオ ｣ にした (0)
• 複数の IE を共存させる Multiple IE をインストール (0)
• 行間の広い MS フォントを作成するソフト (0)