制作ブログ Web制作マークアップCSSfont-family フォントファミリー

font-family フォントファミリー

font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"MS PゴシックMS Pゴシック",sans-serif;

ポイントは記述順とsafari用の指定を用意すること

記述順
font-familyで指定したフォントは左から順番に参照され、条件にあったものを設定する
Mac用(ヒラギノ角ゴ Pro W3)→safari用(Hiragino Kaku Gothic Pro)→Windows用(MS Pゴシック)→何でも用(sans-serif)
safari用
safariでは日本語のフォントファミリを認識しないため英語で記述。
これはマック環境にマイクロソフトフォントをインストールした場合に太字が文字化けするというバグに対応させるため。

font-family:"sans-serif;"

これだと「Mac」では円マークがバックスラッシュになってしまうので注意。

また「Windowsにヒラギノフォントをインストールしている」場合、「ヒラギノ角ゴ Pro W3」 で表示され、アンチエイリアスがかからずちょっと見た目に痛い状態になってしまう。これを回避するには、Mac用とWindows用でfont-familyをJavascriptなどで切り分ける必要があるのだが、「そこまでやるか!?」という感じ。なので、「Windowsにヒラギノフォントをインストールしている」場合か、「Macにマイクロソフトフォントをインストールしている」場合のどちらかを切り捨てるしかない。個人的には、「Windowsにヒラギノフォントをインストールしている」はデフォルトでMacのようにアンチエイリアスがかかる設定に変更していると判断し、「Windowsにヒラギノフォントをインストールしている」場合を切り捨てます。

Internet Explorer 6 で UTF-8 のコンテンツを閲覧した場合、日本語が正常に表示されないことがある

Microsoftによれば、下記の条件をすべて満たしている場合に限り、日本語が正常に表示されない場合があるようです(以下抜粋)。

  • Internet Explorer 6 を使用している。
  • コンテンツを Unicode (UTF-8 の他の Unicode でも発生します。) でエンコードしている。
  • JIS2004 フォントをインストールしている。
  • コンテンツ内で “MS ゴシック”、”MS 明朝”、または “MS P 明朝” のフォントを、<font> タグおよびスタイル指定のいずれかで設定している。

まぁ、font-familyはスタイル指定をしないで、外部CSSに記述し、html4.01であってもfontタグを使用しないようにすればいいってわけなようですね。