【iphone】Noto Serif JPのリスト先頭文字化け

サイト運営

Google fontsの明朝フォント Noto Serif JPを使ったサイトは、iphoneで見ると文字化けが起きることがあります。

Google fontsの導入方法については以下の記事を参照してください

Google fontsのNoto シリーズはNo Tofuから来ているといわれているのですが、今回の問題はいわゆる豆腐文字になってしまって、アレレと言う感じです。

今回の豆腐文字は、リスト要素(<ul><li>)の先頭文字に四角で内部に×の記号が重なって表示される不具合があり、PCのブラウザで見ていると再現せず、リスト要素の全ての先頭文字に起きるわけでもありません。

Noto Serif JPの文字化けが発生する条件

<ul><li>のリスト要素で、次のような条件の時に文字化けが起きます。

iOSを含むSafariで、google fontsのNoto Sans JPで、先頭文字が漢字で、text-align:justify;で、テキストが折り返して複数行になると、先頭文字に×マークのような文字が重なる(先頭文字が消えるわけではない)2019年1月現在

引用元:https://queryinc.co.jp/demo/notosanslist.html

Noto Serif JPの文字化け対策

text-align:justify;をtext-align:left;(またはright)に変更することで、文字化けが解消します。

 

li{
text-align:left;
}

まとめ

スマホでしか発生しない問題は、まず気が付きにくい、気が付いてもデバッグできないのでとても困るのですが、今回は対策があってよかったです。

 

 

タイトルとURLをコピーしました