Naga Blog

Design

「Safari」で文字を太く表示させる方法。

「Mac OS X」標準のWebブラウザーといえば、「Safari」なんですが、この「Safari」文字の部分にちょっとした癖があるんです。<h1〜6>や、<strong>、<em>といったタグを使うとき、文字を強調する為にCSSではfont-familyで指定した細い書体に、font-weight: bolder;の指定を入れて太字にする方法をよく使いますが、この「Safari」では、なんでか無視されてしまうんですよ。調べたところによるとバグではなくて仕様らしいのですが、マイナーな「Safari」の事なんで、資料が少ないのも手伝って、これまで色々と調べても今までどうやったら回避できるのか分からなかったのですが。自力でなんとか解決方法に辿り着きました。長い時間がかかりましたが、これでやっと、「Naga BLOG」を最初に意図していた文字で見せられるようになります。

もう知っている人もいて、何を今更と言われるかも知れませんが、自分の覚え書きも兼ねて、発表しますね。

通常、「Safari」以外のブラウザーでは、font-familyは下記のとおりでよく、font-weight: bolder;だけで太くできるのですが、

font-family: "MS Pゴシック", Osaka, Arial, Helvetica, sans-serif;

この指定だと、「Safari」では太字にできないんですよ。Osakaが入っているので、一見問題無さそうに見えますが、「Mac OS X」標準のOsakaは太い書体を持っていないのが理由です。つまり、「Safari」では、フォントはそのまま表示される仕組みになっているのです。ブラウザーが勝手にフォントに縁を付けて太くするという処理はしていないんですよ。(「Mac OS9」では問題なく太くなります 。)そこで、「Mac OS X」の標準書体で、色々な太さが用意されているヒラギノを、下記のように<h1〜6>や、<strong>、<em>といったタグ向けに「Safari」用として個々に指定することで回避できそうなんですが、

font-family: "ヒラギノ角ゴ Pro W6", "MS Pゴシック", Osaka, Arial, Helvetica, sans-serif;

これでもダメ、今度は、CSSの先頭に@charset "shift-jis";と文字コードをセットしていても、CSS中の和文は無視しちゃうみたいなんです。そこで、苦肉の策として「Safari」が、和文を読まない事を逆手に利用して、英文(ローマ字)で併記してみることにしました。こちらにはW6といった太さを表す文字を入れずに、1つの書体として「Safari」が判断するようにしています。

font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W6", "MS
P Gothic", "MS Pゴシック", Osaka, Arial, Helvetica, sans-serif;

これは、大成功。太字化されました。ただ、えらい長い文になってしまうのが、ちょっとイヤ〜ンな感じですし、bodyタグにまとめて指定できないのが面倒。いちいちコレを太くしたいところに入れるのもナンなので、ちょっと工夫して、

h1,h2,h3,h4,h5,h6,strong,em {
font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W6", "MS
P Gothic", "MS Pゴシック", Osaka, Arial, Helvetica, sans-serif;
font-style:normal;
font-weight: bolder;
}

一括してまとめて設定しておいて、他の要素は改めて指定しなおすようにすれば、簡単なると思います。後、どうしても個々に指定しなければいけない所だけ入れてやれば簡単に終わります。

ということで、仕事で作ったサイトも、修正しなくては…。なんか墓穴を掘った気分。

About this entry

このページは、naganagaが2005年4月 5日 18:45に書いたブログ記事です。

ひとつ前のブログ記事は「裏でトラックバックスパム祭りが開催中です。」です。

次のブログ記事は「GoLive CS2のMTテンプレートカスタマイズ機能は使えるか?」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。