[うらうつ。総本部へ] [インデックスへ]

iosで文字化け&フォントが明朝体で表示されてしまう原因と対策


ios(のsafari)でサイトを表示したときに、文字化けをするケースおよびフォントが明朝体で表示されてしまうケースが増えている。

基本的にsafariの仕様なので閲覧ベースでは対策のしようがほとんどないのが現状だが(対策できるアプリがあることは承知している)、自分のサイトでそれを起こしてしまうと結構なショックである。

その原因と対策を以下に述べる。

1.文字化け

iosで このサンプルページ を開くと、以下のように文字化けしているはずだ。

理由は簡単で、HTMLのヘッダから<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">といった「charset指定」がからすっぽり抜けているのだ(もちろん太字個所はShift_JISでなくてもよい。euc-jpでも、utf-8でも。とにかく文字コード指定がなされていないということ)。

対策はただ1つ、「文字コード指定をしっかり行いましょう」ということに尽きる。大昔からの個人サイトでは、ここが抜け落ちてしまっている場合が見受けられる(CGIが吐き出すHTMLがおかしいこともある)。これ、サイト作成上の意外な落とし穴である。ページ数が多いウェブサイト運営者は、特に注意といったところ。

2.明朝体で表示されてしまう

一方、iosで このサンプルページ を開くと、文字が以下のように明朝体で表示されているはずだ。

理由の1つは(ほかにも原因はある。表示できないフォントを誤って指定してしまっている場合だ)、HTMLのヘッダで例えば<html lang="ja">のように、「言語宣言」(この場合は「日本語のページですよ)をしてしまっている場合に起こるようなのである。

コピペなどをすると、知らないうちに文字単位でこれを指定してしまっている(例えば<P lang="ja">のように)こともある。すると、その行だけ明朝体という気味の悪いことも起こり得るわけだ。

対策は、とりあえず「言語宣言」をやめること。もしlang指定をしているようであれば、とりあえずそれを削除してみる。すると、明朝体での表示はなくなり、従来通りのゴシック体での表示に切り替えることができる(どうしてもlang属性をやめたくなければ、HTMLごとに使用するフォントを指定する[例えばsans-serifを必ず設定するなど]しか方法はなさそうだ)。

例えばこの行は、iosでは「明朝体」で表示されている。ソースを見れば分かるが、この行だけlang指定をしているのである。

・・と、この「iosあるある」の原因究明にはだいぶん骨を折った。はっきり言って「変な仕様」だとは思うが、うまく付き合っていくしかない。


[うらうつ。総本部へ] [インデックスへ]