「○(マル)」「□(四角)」などの記号や特定の文字だけが小さく表示される原因と対処方法

この記事のカテゴリ
WEBサイト運営 / 各種コード
この記事に付けられたタグ
,

ウェブサイトやブログで、他の文字と比べて「○」「●」「□」「■」などの記号だけが小さく表示されてしまう事があります。
他にもあるかもしれませんが、確認できた原因としては以下のような条件下で発生するようです。

  • Unicode(UTF-8など)を宣言していてフォントを指定していない
  • 英字フォントを指定している

IE7でのみ発生するとの情報が多かったんですが、僕の環境だとChromeやFirefoxなど他のブラウザでも小さい表示でした(他の条件や環境が絡んで違って表示されたのかもしれません)。

解決方法は2つあって、1つめは文字コードをUTF-8以外にする事、2つ目はフォントを指定(変更)する事です。
1つ目は業界の流れ的にも今後の事を考えた場合にもあまり現実的ではないので、2つめのフォントで対応する方法を紹介します。

CSSファイルのフォント指定の部分を以下のようにします。
先に記述した方を優先して採用するので、下記のように先に日本語に対応したフォントを書きます。

フォント記述例
body {
font-family: Osaka,"MS Pゴシック","MS PGothic",Sans-Serif;
}
「body」の部分は必要にあわせて変更してください。
あくまで例なので英字以外のフォント以外を先に書けばOKです。
作業は必ずバックアップをとってから行ってください。

変化がない場合は各ブロックのfont-familyを確認してみてください。
それでも駄目な場合は@importなどで他のCSSを読み込んでいないか、その呼び出しているCSSの中にfont-familyがないか確認してみてください。

以上を試しても解決できない場合は、外部CSSで指定するのではなく、HTMLのbodyが任意のブロックにフォント指定を記述します。
bodyに記述する場合のコードはこうです。

<body style="font-family: Osaka,"MS Pゴシック","MS PGothic",Sans-Serif;">

これで変化があったら、どこかしらで呼び出しているCSSが影響していると思われますので、徹底的に探してみてください。

btmup Blogさんを参考にさせていただきました、ありがとうございます。

LINEで送る
Pocket

関連記事

コメントを書き込む

コメントは承認後に公開されます。メールアドレスは公開されません。
*」は必須項目です。