問題が発生
SP画面の開発をしていた際、ある箇所のフォントサイズを8pxに設定。
ところが、複数人から「表示崩れしている」との指摘を受けました。
何度確認しても私の画面で表示崩れは起きていない‥。
なぜ？？？🤔
原因 ： Chromeの「最小フォントサイズ」の罠だった
とりあえず結論。
Google Chromeには「最小フォントサイズ」というものが存在するようです。
表示崩れしていた原因は
最小フォントサイズが10pxに設定されているため、10px未満のCSSを設定しても効かない
ということでした。
なるほど。
それでなぜ私の画面だけおかしかったのかというと、
Chromeを英語設定で使用していたためでした。
🙀🙀
英語設定にしていると、最小フォントサイズが設定されていないようです。
日本語設定だと、デフォルトで10pxになっています。
ちなみに日本でChromeをインストールする場合、基本的に日本語設定になるのですが、
私はPCの言語設定を英語にしているため、自動で英語設定になったと思われます。
思わぬ落とし穴でした。
最小フォントサイズを変える方法
最小フォントサイズの設定をしていきます。
Chromeのアドレスバーに以下を入力して、フォント設定画面を開きます。
chrome://settings/fonts
このような画面です。
最小フォントサイズを10pxにすれば解決！！🙌🏻
そもそも、10px未満のフォントは使わないほうが良い
ここまでつらつらと語っておきながらすみません。
こんなことは一般的に知られておらず、デフォルト設定のままの人が多いです。
だから表示崩れを指摘されて「Chromeの最小フォント設定が〜」なんて理由は通用しないはず。
フォントが小さすぎるとUI的にも良くないので、どうしても10px未満にしたい場合は画像などで対応するのが無難そうですね。
おわりに
最初、原因が全く分からずCSSやライブラリあたりの話だと思っていました。
英語設定、気をつけねば。。
お読みいただきありがとうございました 🐥