Google fontsの明朝フォント Noto Serif JPを使ったサイトは、iphoneで見ると文字化けが起きることがあります。
Google fontsの導入方法については以下の記事を参照してください
Google fontsのNoto シリーズはNo Tofuから来ているといわれているのですが、今回の問題はいわゆる豆腐文字になってしまって、アレレと言う感じです。
今回の豆腐文字は、リスト要素(<ul><li>)の先頭文字に四角で内部に×の記号が重なって表示される不具合があり、PCのブラウザで見ていると再現せず、リスト要素の全ての先頭文字に起きるわけでもありません。
この記事では、Noto Serif JPを使用した時にiphoneだけで起きる厄介な不具合対策方法についてご紹介します。
Noto Serif JPの文字化けが発生する条件
<ul><li>のリスト要素で、次のような条件の時に文字化けが起きます。
iOSを含むSafariで、google fontsのNoto Sans JPで、先頭文字が漢字で、text-align:justify;で、テキストが折り返して複数行になると、先頭文字に×マークのような文字が重なる(先頭文字が消えるわけではない)2019年1月現在
Noto Serif JPの文字化け対策
text-align:justify;をtext-align:left;(またはright)に変更することで、文字化けが解消します。
li{
text-align:left;
}
まとめ
スマホでしか発生しない問題は、まず気が付きにくい、気が付いてもデバッグできないのでとても困るのですが、今回は対策があってよかったです。