特定の記号（○マル等）が小さくなる問題の対処法

　Webページを作成した際、○マルなどの記号が小さく表示されることがあって不格好に見えるなと困っていたが解決方法がわかったので書き記しておく。
　原因はフォント指定であった。SafariとIEではフォント指定がされてない場合、日本語文字は日本語フォント（ヒラギノ、MSPゴシック）が、英数文字は英字フォント（Times等）が指定される。そして○などの記号は英数文字扱いされ、英字フォントでは記号が小さく表示（○）されるのである。
　このサイトのようにCSSで英字フォントを優先して指定「font-family: Arial,'Hiragino Kaku Gothic ProN', 'Hiragino Kaku Gothic Pro', Meiryo, sans-serif;」している場合は○等が小さく表示されてしまう。
　つまり、日本語フォントを指定すれば解決できる。

---

フォントによる違い

Times	○	×	△	◎	□
Arial	○	×	△	◎	□
MS Pゴシック	○	×	△	◎	□
メイリオ	○	×	△	◎	□
ヒラギノ角ゴシック ProN	○	×	△	◎	□
osaka	○	×	△	◎	□

　PCなどに各フォントが入っていない場合は正しく表示されません。こちらの画像で確認して下さい。

---

　ヒラギノは×が小さめ表示なので、スマホで表示する時はちょっと違和感が出るかもしれない。

ツイート