Safariでbold表示させる方法

ちょっと自分的メモ。
　すでに知ってる人は知ってる話ですけど。

ここ最近、CSSを使ってWEBサイトを作るようになって、実はずっと困ってたけど見て見ぬ振りをしてきたことが1つ。それはアップルのMacOS X専用ブラウザ「Safari」だけが、文字を太字で表示させるCSSの「font-weight: bold;」の解釈が違うということ。

通常「Safari」以外のすべてのブラウザは、「font-weight: bold;」の指定があった場合にブラウザが文字を強制的に太くして表示するんですが、なぜか「Safari」だけは、表示フォントのbold書体で表示するという仕様になっています。
　要するに、普通のブラウザであればどんなフォントであろうと強制的にブラウザが太字に表示してくれるのに、「Safari」に限ってはbold書体を持たないフォントの場合、「font-weight: bold;」を指定しても太字にならないというわけです。

これ、アップルは仕様ということにしてますが、どー考えてもバグじゃね？・・・

っで問題なのは、標準の欧文フォントというのはたいていbold書体を持っているので「Safari」でも欧文の部分はちゃんと太字になるんですが、日本語フォントというのは基本的にbold書体というものがありません。正確にいうと、日本語フォントでは太さが違う何種類かの書体に分かれているので、どの太さがbold書体ということは明示されていないわけです。
　このためfont-familyで「ヒラギノ角ゴ Pro W6」とか指定して同時に「font-weight: bold;」を指定してやっても、「Safari」では太字に表示されません。

Safari CSS i@GoLive CS

Decayed sea ~ CSSのfont-weightチェックページ ~

っでこれには唯一解決策があって、どうやらMacOS Xの日本語フォントでも内部的にはbold書体というパラメータは持っているようで、font-familyの指定で日本語表記ではなく、以下のように英語表記でフォントファミリー名を指定してやると、ちゃんとbold指定が反映されます。

font-family: 'Hiragino Kaku Gothic Pro';

っで「Safari」では、「font-weight: bold;」にしなくてもデフォルトで太字表示される「H」タグなども上のようにフォントを指定していない場合、日本語部分だけが太字にならないという事態になってしまうので、「Safari」で太字表示させるには、CSSで「*」クラスや「Body」タグなどにあらかじめ'Hiragino Kaku Gothic Pro'を指定しておくか、もしくは「H」タグなど太字にしたい部分にすべて'Hiragino Kaku Gothic Pro'を指定してやる必要があります。

っでまあこれで一件落着かと思うんですが、ここで更なる落とし穴が。
　実は「Mac IE5」では、font-familyで「ヒラギノ角ゴ」を指定すると、なぜかベースラインが上にずれるのです。まあそれほどレイアウトに問題なければいいんですが、上下の空きをセンターに揃えたりしてると、「Mac IE5」だけが文字が上にずれた状態になってしまうので、これまた困った状態になるわけです。

ひとまずここまでの問題点を整理すると、

• 「Safari」で太字表示させるにはfont-familyに'Hiragino Kaku Gothic Pro'を指定してやる必要がある。
• font-familyに'Hiragino Kaku Gothic Pro'を指定してやると「Mac IE5」では表示がずれる。
• font-familyに'Hiragino Kaku Gothic Pro'を指定しなければ、「Safari」以外は問題がない。
• font-familyに'Hiragino Kaku Gothic Pro'を指定しても、「Mac IE5」以外には大した影響はない。

という感じで、アッチをたてればコッチがたたず状態で、いったいどーしたもんかと。
　っで単純に考えれば解決策としては、

1. 「Safari」にだけfont-familyに'Hiragino Kaku Gothic Pro'を指定したCSSを読ませる。
2. 「Mac IE5」にだけfont-familyに'Hiragino Kaku Gothic Pro'を指定したCSSを読ませない。

の2つなんですが、どちらかというと 2. のやり方の方が簡単なので、「Mac IE5」にだけCSSを読ませないようにします。
　方法は以下のサイトで。

Mac IE5にスタイルを適用しないようにする

「Mac IE5」では「/*\*/」とすると以後コメントとして処理されてしまうバグがあるので、

font-family: 'Hiragino Kaku Gothic Pro';

と指定した部分を「/*\*/」と「/* */」という2つのコメントで囲んでやると、「Mac IE5」では間の部分もコメントとして処理され、CSSとしては読み込まなくなります。

/*\*/font-family: 'Hiragino Kaku Gothic Pro';/* */

これで無事完了。
　あ、もちろん正確には欧文も指定しないとアレので、

/*\*/font-family: 'Hiragino Kaku Gothic Pro', Verdana, sans-serif;/* */

って感じがイイと思いますが。
　それにしてもホント、CSSは疲れﾏｽﾈ。。。

（っというわけで、このブログにも適用）