表題の件、CSSでfont-familyに日本語のGoogle Fontsを指定したテキストを旧バージョンのiOSで表示した時に、特定のフォントのいくつかで発生することがわかり、原因がわからずお手上げだったので備忘録としてここに書きます。
現象はこのとおり。(iPhone X, iOS12.2, font-family: BIZ UDGothic）
ここで、先頭の青い矩形はinline-blockで内容は空です。矩形の右側に現れているバツ印の四角がゴミ文字で、「情」という文字に被さっています。下側の例は「情」の前に全角スペースを入れたものです。全角スペースの位置にバツ印が出てしまってます。
html
<p class="justify"><span class="ib"></span>情に棹させば流される。智に働けば角が立つ。</p>
css
.justify {
text-align: justify;
}
.ib {
display: inline-block;
width: 2em;
height: 1em;
outline: 1px solid blue;
}
2022年6月現在Google Fontsに登録されている日本語sans-serif, serifフォント44種類で試した結果、発生する条件や特徴がわかってきました。
- テキストのブロックに
text-align: justifyが設定されている。 - テキストの折り返しがある。
- １文字目が漢字や全角スペースなどで発生。１文字目が「かな」「カナ」の場合は発生しない。
- 発生するフォントは下記CodePen参照。なお、Noto Sansでは発生しなかった。
- 発生を確認できたiOSのバージョンは、v12.2, 13.2。v14.2や15.2では発生しなかった。（他のバージョンはこちらの環境にないため未確認）
- v12.2で発生していても13.2では発生しなくなったフォントもあった。
- バツ印が表示されている箇所を含めてコピペしてデータを確認したが、バツ印部分に制御文字など無かった。
- フォントによってはバツ印の幅が狭かったり、別の潰れた図形だったりする。
再現テストに使ったコードはこちら： https://codepen.io/kaz_hashimoto/pen/NWYKRdE
現象が発生したフォント名は、上記コードのjavascript内の配列にコメントで記入してあります。