トイレのうず

このサイトを iPhone SE の実機にて確認したところ、文字化けが起こっていました。行の先頭の文字だけ☒(□に×、四角にバツの文字)が重なって表示されるのです。 Google で検索してもそれっぽい情報がなかなか出てこなくて苦労したので、解決方法を記事にまとめておきます。

iOS での先頭の文字だけ文字化け

どんな感じかというと下記のキャプチャのようです。

iOS にて先頭の文字だけ文字化けして☒(□に×の文字)が重なる

すべての先頭の文字だけ☒(□に×の文字)が重なるわけではなく、不規則に文字化けしています。

原因と解決法

いろいろな検索ワードで調べてみて、やっと出てきた以下のサイトを参考に修正しました。

→ teratail : iOS で□の中に×があるような記号(☒)の文字化け発生する

原因は CSS にて font-family: -apple-system に設定したのに、 font-feature-settings を設定していないことでした。ヒラギノ角ゴ Pro を指定したときはこの問題は起きません。

font-feature-settings は何かというと、カーニング(文字同士の空き)を調整する CSS プロパティです。

→ dainamo : CSS でも字詰ができる! font-feature-settings で美しい日本語フォントのカーニング

font-feature-settings : "nomal";
字詰なし
font-feature-settings : "pkna";
約物以外は字詰あり
font-feature-settings : "palt";
すべて字詰あり

palt だと詰まりすぎなので、 pkna を body に指定ました。


body{
  font-feature-settings: "pkna" 1;
}
font-feature-settings を設定したら文字化けしなくなった

これで謎の☒(□に×の文字)は消えました。なかなか原因がわからなかったので解決できてよかったです。

関連記事

【 CSS 】画像置換の方法を変更してみた
Web制作
thumbnail
IE6 にて縦スクロールバーが 2 本出てたのを修正
Web制作
thumbnail
CSS 画像置換失敗
Web制作
thumbnail
文字ちっちゃい!【 Yahoo! 編】
Web制作
thumbnail
Google ウェブマスターツールにて「タイトルタグの重複」がたくさんある
WordPressWeb制作
thumbnail
Seesaa blog のタグクラウドが Windows IE から見たときに行間が狭くなる件
Web制作
Windows IEの元の表示

コメント (6)

  • sss

    同じ症状で困っておりましたところ、この記事を拝見し解決致しました。
    大変助かりました!ありがとうございます。

  • あさこん

    ◇ sss さん◇
    コメントありがとうございます。
    お役に立ててよかったです。

  • あさこん

    ◇まちゃまちゃさん◇
    コメントありがとうございます!

  • かのう

    素晴らしい❗️ iPhone だけに出てくる謎の文字化け、全く分からず苦労していました。ありがとうございます

  • あさこん

    ◇かのうさん◇
    コメントありがとうございます!
    本当に謎の文字が重なってなにが原因かわからないですよね。

コメントを書く