ウェブページのフォントをメイリオにしたくなって、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 ) のテストページ](/wp-content/uploads/css/font-family/sans-serif.html)
Mac 環境で表示する場合、Lucida Grande + ヒラギノ角ゴ Pro W3 が個人的に良さげ。