米印フォントのiPad対応

ブログを書いている時に今まで気になっていたのが、注意書きや但し書きの意味で米印「※」を使うと、思ったとおりに表示されないことです。注意喚起の意味で使っているので、大きくと表示してほしいのですが、なぜか小さくと表示されてしまうのです。多分フォント指定の問題なんだろうとは思っていたのですが億劫で放っていて、今日ようやくその重い腰を上げて調べました。

フォントの基本

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 Pゴシック', '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; ※これは注意書きです。

表示例

※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;
※これは注意書きです。