このサイトを iPhone SE の実機にて確認したところ、文字化けが起こっていました。行の先頭の文字だけ☒（□に×、四角にバツの文字）が重なって表示されるのです。 Google で検索してもそれっぽい情報がなかなか出てこなくて苦労したので、解決方法を記事にまとめておきます。
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;
}
これで謎の☒（□に×の文字）は消えました。なかなか原因がわからなかったので解決できてよかったです。
