ブログを書いている時に今まで気になっていたのが、注意書きや但し書きの意味で米印「※」を使うと、思ったとおりに表示されないことです。注意喚起の意味で使っているので、大きく
と表示してほしいのですが、なぜか小さく
と表示されてしまうのです。多分フォント指定の問題なんだろうとは思っていたのですが億劫で放っていて、今日ようやくその重い腰を上げて調べました。
フォントの基本
WEBでのフォント指定
WEBでフォントを指定するにはCSSで次のように記述します。
body {
font-family: Helvetica, Arial, Verdana, sans-serif;
}
※左から順に優先されます。
日本語フォント
システム標準の日本語フォントは、次のようになっています。（ゴシック体のノーマルウェイトフォント）
| Mac | Widows | iPhone/iPad | |||
|---|---|---|---|---|---|
| 〜OS X 10.4 | OS X 10.5〜 | 〜XP | Vista〜 | ||
| ヒラギノ角ゴ Pro W3 | ○ | ○ | × | × | × |
| HiraKakuPro-W3 | |||||
| ヒラギノ角ゴ ProN W3 | × | ○ | × | × | ○ |
| HiraKakuProN-W3 | |||||
| MS Pゴシック | × | × | ○ | ○ | × |
| MS PGothic | |||||
| メイリオ | × | × | × | ○ | × |
| Meiryo | |||||
| Sans-Serif | ○ | ○ | ○ | ○ | × |
※ Sans-Serifは、線の最後に飾りがないフォント。Mac, Windows共に使えるフォントとして指定されることが多い。
ブラウザによる違い
Safariは、日本語表記を無視します。
例：’ヒラギノ角ゴ ProN W3′ などはだめ。
Firefoxは、日本語のアルファベット表記を無視するバージョンがあります。
例：’Hiragino Kaku Gothic Pro’などはだめ。
フォント指定の実験
フォント指定の違いでどのように表示が変わるかを確認しました。
Mac Safari (v5.1.5)
フォントの日本語表記が認識されていないので、’ヒラギノ角ゴ Pro W3’と’ヒラギノ角ゴ ProN W3’は米印が小さめになっています。Sans-Serifも米印がおかしくなっています。serifは明朝体になっているので、Sans-SerifとSerifは認識されていてなんとか違いを表現しようとしているようです。
Mac Chrome (v18.0.1025.162)
フォントの日本語表記、アルファベット表記ともに認識されています。
Mac Firefox (v11)
最新バージョンのせいか、日本語表記もアルファベット表記もきちんと認識されています。
新しいiPad Safari
iPadに入っている日本語フォントはProではなくProNなので、HiraKakuProN-W3しか認識されていませんね。フォント指定の最後の砦としてよく使われるSans-Serifも米印がおかしくなっています。
結論
実験の結果から、iPadで米印を大きく表示させるためには、HiraKakuProN-W3を指定する必要があることがわかりました。そこで、このブログでは次のようにフォント指定することにしました。
body {
font-family: HiraKakuProN-W3, HiraKakuPro-W3,
'ヒラギノ角ゴ ProN W3',
'ヒラギノ角ゴ Pro W3',
Meiryo, 'メイリオ',
'ＭＳ Ｐゴシック', 'MS PGothic',
Arial, Sans-Serif;
}
iPad用にProNのフォントをアルファベット表記で最初に指定しています。
全ての日本語フォントについて、アルファベット表記と日本語表記の両方行うことでブラウザの違いを吸収しています。
これまでの慣習に従って、Sans-Serifを最後の砦にしています。
その他
ヒラギノフォントの Pro と ProNの違い
WikipediaのJIS X 0213 – JIS X 0213:2004の改正 によると、表示方法が変わった文字が168あり、10文字追加されています。
Android端末での表示
手持ちのスマートフォン(Arrows ES IS12F, Android2.3.5)とタブレット(Optimus Pad L-06C, Android 3.1)で確認してみたところ、米印はうまく表示されていました。
Arrows ES
Optimus Pad
実験に使ったHTMLコード
※font-family: 'ヒラギノ角ゴ Pro W3'; ※これは注意書きです。※font-family: 'ヒラギノ角ゴ ProN W3'; ※これは注意書きです。※font-family: HiraKakuProN-W3; ※これは注意書きです。※font-family: HiraKakuPro-W3; ※これは注意書きです。※font-family: 'Hiragino Kaku Gothic Pro'; ※これは注意書きです。※font-family: Helvetica; ※これは注意書きです。※font-family: Arial; ※これは注意書きです。※font-family: sans-serif; ※これは注意書きです。※font-family: serif; ※これは注意書きです。
表示例
※これは注意書きです。
※これは注意書きです。
※これは注意書きです。
※これは注意書きです。
※これは注意書きです。
※これは注意書きです。
※これは注意書きです。
※これは注意書きです。
※これは注意書きです。