お問い合わせはコチラから

【iphone】Noto Serif JPのリスト先頭文字化けの原因と対策【Google fonts】

サイト運営

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月現在

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

Noto Serif JPの文字化け対策

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


li{
text-align:left;
}

まとめ

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

この記事を書いた人
ブーン

はるばる日本よりオランダ王国へやってまいりました。
自分の経験が少しでも参考になれば嬉しいです。
お問い合わせは、『こちら』からお願い致します。

\ブーンをフォロー/
スポンサーリンク
サイト運営
\シェアお願いします!/
\ブーンをフォロー/
こんな記事も読まれています

失敗しないレンタルサーバーランキング

mixhost

不正アクセスに強くて使いやすいおススメサーバー
\本サイトで利用中/
メリット①:自動ウィルス駆除対応
メリット②:サイトの表示速度が速い!
メリット③:転送量の上限が多い!
メリット④:自由にプラン変更ができ、アクセス増にも対応できる!
メリット⑤:バックアップデータが無料で復元できる!
メリット⑥:Wordpressが簡単にインストールできる!
メリット⑦:どのプランでも初期費用が無料!
メリット⑧:10日間の無料お試し期間と30日の返金保証!

Conoha Wing

国内Wordpress最速の最強サーバー
メリット①:圧倒的な表示速度
メリット②:レンタルサーバーと独自ドメインがセットでお得◎
メリット③:プラン変更はすべてのプランで自由自在
メリット④:一か月の利用転送量の制限が緩い(9TB~)
メリット⑤:WordPresサイトの移行が簡単

エックスサーバー

国内シェアNo1の安定性と実績が魅力。ALL SSDで死角なしの万能サーバー。
メリット①:サイトの表示速度が安定して速い!
メリット②:アクセス負荷に強くて安定性が高い!
メリット③:24時間365日の充実サポートで安心!電話サポートもあり!
メリット④:転送量が多い!
メリット⑤:自動バックアップ機能付き!
メリット⑥:WordPressが簡単にインストールできる!
メリット⑦:10日の無料お試し期間がある!

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