CSSでのフォント指定について

Macに「ＭＳ Ｐゴシック」？

ここまでの指定をMacで表示してみます。私のMacではFirefoxで見ると「ＭＳ Ｐゴシック」で表示されてしまいます。
2008年1月にリリースされた「Office 2008 for Mac」や、その前バージョンである「Office 2004 for Mac」をインストールすると、「ＭＳ Ｐゴシック」や「ＭＳゴシック」、「ＭＳ Ｐ明朝」などのMS系のフォントがシステムに組み込まれてしまうのです。
購入するMacによっては、Officeのテストドライブ（デモ版）が入っており、同様に「ＭＳ Ｐゴシック」で表示されてしまいます。
「ＭＳ Ｐゴシック」で何か不都合が？？？　実はあるのです。日本語のプロポーショナルフォントという概念を持たないMacでは「ＭＳ Ｐゴシック」を表示すると、「く」のように文字幅の狭い文字や（）や「」などのカッコ類の送り（文字位置）が不自然になってしまいます。

対応策として「Verdana, "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", Osaka」のように、「ヒラギノ角ゴ Pro W」を「ＭＳ Ｐゴシック」より前に出しておけばよいでしょう。

Macでは字間調整は不要

プロポーショナルという概念がないMacでは、文字をそのまま並べた状態で自然です。もちろん、好みにもよりますが、字間調整は不要でしょう。
このような場合には、セレクタの前に「* html 」をつけるルールを作成し、WindowsのInternet Explorerのみに異なる指定を行います。

body {
	font-family: "ヒラギノ角ゴ Pro W3", Osaka ;
}
* html body {
	font-family: Verdana, "ＭＳ Ｐゴシック", Osaka;
	letter-spacing: 1px;
}

日本語フォントを認識できないSafari

「"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"」のようにフォントを指定すると、Safariでは日本語フォントを認識できないため、「ＭＳ Ｐゴシック」が無視され、次候補である「Osaka」で表示されます。

Mac OS Xでの「Osaka」フォントは、アウトラインフォントとして扱われますが、ウエイトが重めに表示されてしまうので、文章内で強調などのために太字に設定したい箇所とのメリハリがつきにくいという欠点があります。
これを回避するためには「"Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Osaka」のようにアルファベット表記を加えます。

総称ファミリー名（generic-family）

Firefoxでは、"Hiragino Kaku Gothic Pro"を認識しないため、"ヒラギノ角ゴ Pro W3"を併記しておく必要があります。
最近では、ブラウザ以外のデバイス対応という課題が出てきました。ヒラギノ角ゴ Pro W3も、Osakaも、MS P ゴシックもないデバイスのために「sans-serif」のように「総称ファミリー名（generic-family）」を併記しておくとよいでしょう。

「sans-serif」は日本語でいう「ゴシック体」、「serif」は「明朝体」を指します。
「font-family: sans-serif;」のように指定すれば、とりあえずゴシック体で表示されますが、Windows環境では、半角の円マークがバックスラッシュで表示されてしまいますので、Windows用には避けるべきでしょう。

ページ 2 / 4

前のページ

次のページ