2018年11月16日 : してログ

Unicode(UTF-8)を採用しているサイトで、これらの文字が小さく(半角サイズで)表示されてしまう場合があります。ブラウザがこれらの記号が表示される際、小さく表示される欧文フォントが選択されてしまうために起こります。いくつか対応方法がありますが、CSS で font-family を固定してしまうのがベストだと思います。

日本語フォントを指定した場合

日本語フォントを指定すると「○×□」は正しい幅で表示されます
<div style='font-family:"MS ゴシック"'>○×□</div>

欧文フォントを指定した場合

欧文フォントを指定すると「○×□」は半角の幅で表示されます
<div style='font-family:"Arial"'>○×□</div>

以前の私は「font-family: monospace」を指定していましたが、これだとブラウザに依存してしまうのでお勧めしません。ブラウザのデフォルト設定に依存しないよう、しっかりフォントを固定しておくことをお勧めします。また例では「MS ゴシック」のみですが、Windows でも MacOS でも大丈夫なように複数の日本語フォントを指定するのが良いと思います。

ようはブラウザのデフォルト設定で、欧文フォントが日本語フォントより優先されているため、Unicode で表示可能な記号が欧文フォントで描画されてしまうということでしょう。Unicode だと欧文フォントでも表示可能な記号としてマップされているのだと思います。ただ、欧文と日本語でフォントを分けたい場合は対応できませんが、個人的には同じフォントで描画した方が好きなので問題ありません。