問題が発生

SP画面の開発をしていた際、ある箇所のフォントサイズを8pxに設定。
ところが、複数人から「表示崩れしている」との指摘を受けました。
何度確認しても私の画面で表示崩れは起きていない‥。

なぜ？？？🤔

原因： Chromeの「最小フォントサイズ」の罠だった

とりあえず結論。
Google Chromeには「最小フォントサイズ」というものが存在するようです。

表示崩れしていた原因は
最小フォントサイズが10pxに設定されているため、10px未満のCSSを設定しても効かない
ということでした。

なるほど。

それでなぜ私の画面だけおかしかったのかというと、
Chromeを英語設定で使用していたためでした。

🙀🙀

英語設定にしていると、最小フォントサイズが設定されていないようです。
日本語設定だと、デフォルトで10pxになっています。

ちなみに日本でChromeをインストールする場合、基本的に日本語設定になるのですが、
私はPCの言語設定を英語にしているため、自動で英語設定になったと思われます。

思わぬ落とし穴でした。

最小フォントサイズの設定をしていきます。
Chromeのアドレスバーに以下を入力して、フォント設定画面を開きます。

chrome://settings/fonts

このような画面です。

最小フォントサイズを10pxにすれば解決！！🙌🏻

ここまでつらつらと語っておきながらすみません。
こんなことは一般的に知られておらず、デフォルト設定のままの人が多いです。
だから表示崩れを指摘されて「Chromeの最小フォント設定が〜」なんて理由は通用しないはず。

フォントが小さすぎるとUI的にも良くないので、どうしても10px未満にしたい場合は画像などで対応するのが無難そうですね。

最初、原因が全く分からずCSSやライブラリあたりの話だと思っていました。
英語設定、気をつけねば。。

お読みいただきありがとうございました 🐥