今まで何気なく書いていたフォント指定ですが、hirobox: Safari、スタイルシートでのフォント指定の実際を開いてみたところ、ブラウザによって解釈がまちまちで全然反映されないことがあるのが判明。

ここでは、とりあえずヒラギノに絞って話を書いていきます。検証してみたところ、Safari では、日本語名でのフォント指定が効かず、アルファベット表記でも、フォントウェイトを含む形での指定は反映されないようです。

ヒラギノ角ゴシック Pro の場合：

ブラウザ名	指定のし方	表記例
Safari	ウェイトなしアルファベット表記	'Hiragino Kaku Gothic Pro'
Firefox	ウェイト付き日本語表記	'ヒラギノ角ゴ Pro W3' または 'ヒラギノ角ゴ Pro W6'
Mac IE 5.2	ウェイト付き日本語表記	'ヒラギノ角ゴ Pro W3' または 'ヒラギノ角ゴ Pro W6'

実際に指定してみます。ここはヒラギノ明朝 Pro でやってみます。
ヒラギノ角ゴシックをデフォルトフォントにしている人が多いだろうし、そもそも当サイトのスタイルシートの指定もヒラギノ角ゴシックなので、ヒラギノ角ゴシックでやると差異がわからないためです。

各指定の２段目は太字 (font-weight: bold) にしています。

ウェイトなし日本語表記：	"ヒラギノ明朝 Pro"
	"ヒラギノ明朝 Pro"
ウェイト付き日本語表記：	"ヒラギノ明朝 Pro W3"、"ヒラギノ明朝 Pro W6"
	"ヒラギノ明朝 Pro W3"、"ヒラギノ明朝 Pro W6"
ウェイトなしアルファベット表記：	"Hiragino Mincho Pro"
	"Hiragino Mincho Pro"
ウェイト付きアルファベット表記：	"Hiragino Mincho Pro W3"、"Hiragino Mincho Pro W6"
	"Hiragino Mincho Pro W3"、"Hiragino Mincho Pro W6"
ウェイトなしポストスクリプト名：	HiraMinPro
	HiraMinPro
ウェイト付きポストスクリプト名：	HiraMinPro-W3、HiraMinPro-W6
	HiraMinPro-W3、HiraMinPro-W6

明朝で表示されていないもの (=ゴシックで表示されているもの) は、フォントファミリーの指定が効いていないものです。指定が

Safari では、ウェイトなしアルファベット表記の場合しか有効でないことがわかります。ポストスクリプト名で指定した場合は、ウェイトまで含めれば表示されています。ただし、この場合は太字指定したときにウェイトとの整合性が取れないと、フォント指定が効かなくなってしまっているので、使わない方がいいでしょう。フォントファミリーの指定が効いていないにも関わらず、太字がちゃんと表示されているのは、このページ全体のフォントがウェイトなしの 'Hiragino Kaku Gothic Pro' で指定されているためで、もしこれをウェイト付きの 'Hiragino Kaku Gothic Pro W3' で指定していた場合、font-weight: bold にしていても、きれいに太字で表示されません。

Firefox では、すべて明朝で表示されています。どの指定のし方でも一応フォントファミリーの指定は効いているようです。ただし、ウェイトを含むフォント名で指定する場合は、日本語表記でないとダメなようです。アルファベット表記だと、"Hiragino Mincho Pro W6" と指定しても、"Hiragino Mincho Pro W3" と同じ表示です。
(訂正) Firefox では、ウェイトを含む日本語表記でないとフォントの指定が反映されません。(上記でそれ以外の場合に明朝になったのは、単にデフォルトフォントだったからでした。)

Mac IE 5.2 の場合は、フォントウェイトを含む日本語のフォント名で指定しないとダメなようです。それ以外の指定のし方では無視されています。

ついでにフォントウェイトを持っていないフォントも見てみます。

日本語表記：	"ＭＳ 明朝"	"ＭＳ Ｐ明朝"
	"ＭＳ 明朝"	"ＭＳ Ｐ明朝"
アルファベット表記：	"MS Mincho"	"MS PMincho"
	"MS Mincho"	"MS PMincho"
ポストスクリプト名表記：	MS-Mincho	MS-PMincho
	MS-Mincho	MS-PMincho
Osaka は Osaka	Osaka
	Osaka

Firefox はどの指定のし方でも明朝系で表示されていますが、アルファベット表記の場合だと、明朝系ではあるものの異なるフォントが使われているように見えます。Firefox は、やはりアルファベット表記のフォント指定を理解しないようです。Mac IE も日本語表記での指定でないと、効いていません。Safari はアルファベット表記での指定でないと反映されませんが、 太字をかけるとフォントファミリーの指定まで効かなくなってしまっています。フォントウェイトのないものは太字で表示できないということで、やっかいなことです。(一部のサイトで、フォントファミリーが Osaka などに指定してあると汚く見えるのはそのせいだと思います。)

以上を勘案して、結局のところフォントファミリーの指定は、以下の通り。

font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3";

ウェイトなしアルファベット表記が Safari 用、ウェイト付き日本語表記が Firefox (他の Gecko 系も同じかな) および Mac IE 5.2 用。MS ゴシックを指定しないのは、Windows ユーザで美しくない MS ゴシックを避けている人がいるため (参照過去記事1) で、sans-serif を指定していないのは、Windows Me 以前の IE で文字化けするため (参照過去記事2) です。

それとスタイルシートのフォント指定に日本語が含まれるため、以下のようなエンコーディングの指定をスタイルシートの頭に入れました (参照：HINAGATA:CSSの@charsetをご確認ください)。

@charset 'UTF-8';

あー、疲れた。Opera なんかはどうなるんだろう？と気になりつつも、ここまで。(ざっと見たところ、Opera もウェイト付き日本語名でよいみたいです。)

ちなみに、こうしたいろいろなブラウザでの見た目を検証するには、過去記事「いろいろなブラウザでページを開く簡単な方法」を参考にして下さい。

Trackback Ping URL(U)