iPhone用WEBサイトでヒラギノ角ゴW6（太字）を使用する方法

久しぶりに記事を書きます。

最近はスマホ向けのWEBサービス開発をやっているのですが、 iPhone（iOS）で表示する際に、太字であるヒラギノ角ゴW6を表現するときのCSSの指定の方法に罠があったので残しておきます。

とりあえず、iOSの場合は、font-weight:bold は効きませんので、 font-famiryをヒラギノ角ゴW6にしてあげる必要があります。




 PC(mac)向けならば、

bold_text {
　font-family:"ヒラギノ角ゴ Pro W6","Hiragino Kaku Gothic Pro W6",sans-serif;
　font-weight: bold;
}

とすればヒラギノ角ゴW6で表示されるのですが (まぁ日本語のfont名があたるので当然ですけど)
iPhone実機で見るとところがどっこい。W6で表示をしてはくれません。

 色々なフォント指定を一個ずつ試していった結果、iOSでのフォント名は以下の記述のようです。


(wikiより)
iPhone、iPod touch、iPadには、以下のフォントが標準インストールされる。
・HiraKakuProN-W3
・HiraKakuProN-W6

"HiraKakuProN-W6"って書かなきゃダメなんですね。。。
Hiragino Kaku Gothic Pro W6って記述もあったので騙された。

と、言う訳で正しい記述は以下。

bold_text {
　font-family: "HiraKakuProN-W6", sans-serif; 
　font-weight: bold;
}

 上記はスマホでしか見ないので、
"HiraKakuProN-W6"の指定しかしてません。
（一応予防線としてfont-weight: bold;も入れてますが）

PC向けや、Androidを見る場合は適時それ用の記述を追加する必要があります。