少し前、検証のために「Windows XPモード」で自分のブログを開いてみたところ、思わぬ不具合に遭遇しました。
Chromeで表示すると、なんとトップページやブログ一覧のテキストのところどころが「！」（ビックリマーク）に文字化けしているではありませんか……！
「ん？」と思い、メイン環境のWindows 7で見てみると何ともありません。
いったいどういうことだ……？と調べてみたところ、どうやらCSSのフォント指定（font-family）に問題があることが分かりました。
原因はCSSの sans-serif 指定
私のサイトでは、CSSのフォントを以下の順で読み込むように指定していました。
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;原因を特定するため、左から順にフォントの指定を消して検証してみたのですが、一向に変化なし。 あれ？と思い、今度は右から消してみると……一番右の sans-serif を消した瞬間に「！」の文字化けが直りました！
ほほう……どうやらXP環境のChromeにおいては、総称フォントファミリである sans-serif が悪さをしていたようです。
CSSから sans-serif の記述を削除し、無事にXPのChromeでも正常に表示されるようになりました。
その他のブラウザとスマホ表示の不具合について
XP環境での他ブラウザの状況も確認してみました。
- Firefox: 問題なく表示。
- IE6: 不明なエラーで弾かれて閲覧不可。
- IE7 / IE8: 文字化けはないものの、HPのレイアウト自体が大きく崩れる。
当サイトはIE9以上を推奨していますが、Windows XPではIE9がインストールできないため、XPユーザーの方にはできればFirefoxかChromeでの閲覧をお勧めします。
スマホ（古いAndroid）特有の文字化けも……
また、携帯電話からのアクセス時、特に少し古いAndroid端末（MEDIAS N-06Cなど）で見た場合、トップページの左側でテキストが「□」に文字化け（豆腐化）する現象も確認しています。 これはCSSで「改行しない（white-space: nowrap; など）」設定にしているのが原因のようです。XperiaやiPhoneでは問題なく表示されるため、現状は特に対策せずに置いています。
もし「N-06C以外の機種でも□が出るよ！」という方がいらっしゃいましたら、ぜひ教えていただけると嬉しいです。
【おまけの豆知識】「！」の正式名称とGoogle検索の罠
ところで、皆さんは「！」のことを普段なんと呼んでいますか？ よく「ビックリマーク」と呼びますが、正式名称は「エクスクラメーションマーク」、日本語では「感嘆符（かんたんふ）」と言います。 （パソコンの変換でも「かんたんふ」と打つと「！」が出ますよ！）
ちなみに「？」は「クエスチョンマーク」または「疑問符（ぎもんふ）」ですね。
気をつけたいのが、Google検索では「！」や「？」などの記号は検索ワードとしてサポートされていない（無視される）場合が多いということです。 エラーメッセージを調べる時などに「！」を含めて検索しても上手くヒットしないので、記号は除外して検索するよう気をつけてみてくださいね。
