Noto Serif JPを使うとiPhoneで文字化け

本来の漢字に重なって四角にバツが表示されます。

と言われてもピンとこないでしょうから写真をご覧ください。ウェブページにおいて「人」という漢字に□、さらに×が重なっています。

豆腐やゲタになるのはよく目にしますが、こんなの初めて見ました。本来の文字は「人」で合っているので厳密には文字化けではない…？

<li>の１文字目が漢字の部分は全て文字化けし、ひらがなは全て正常でした。iPhoneユーザーからの指摘で発覚しました。調べてみるとたしかにiPhoneのみ。iPhoneではSafariでもChromeでもおこりました。

初めての事象なのでネットで調べてみたのですが「四角にバツ」とかで検索しても絵文字の文字化けばかりヒットしてなかなか目的の情報にたどり着けません。自力でhtml、cssをいじっていると「list-style:disc」を「list-style:non」に変更すると解消されることを発見！

とりあえず文字化けするよりは良いのですが、いかんせん見栄えが悪い。その後も検索を続け、やっと見つけたのが以下の記事。

https://queryinc.co.jp/blog/notosanslist/

ここによると以下の条件で発生する模様
・「Noto Sans JP」フォントを使う
・「li」に「list-style」を「none」以外に設定
・「li」に「text-align:justify」
・「li」の１文字目が漢字
・折り返して自動改行された時のみ
・iPhoneのみの不具合、PCは正常

まさしくコレです。非常にまれなケースではあるもののバグ（フォント？ブラウザ？）のようですね。結局「text-align:left」で回避。

「Noto Sans JP」というキーワードが見つかったのでさらに検索してみると、いくつか不具合の報告がありました。

https://nldot.info/iphone-noto-serif-jp-mojibake/
https://pamiroh.com/2547/

知らないで出くわすとビックリしますね。