フィリピンでのオフショア開発・ラボ型開発をご検討の方!お任せください。

クロームでフォントサイズが変更できない時の対処法。最小フォントサイズに気をつけろ!


クロームだけCSSが効かない、、フォントサイズが小さくならないのだ、、、朝からこの症状に悩まされて系3時間くらいを無駄に過ごしてしまった。

Google クロームには最小フォントサイズが存在する

サファリや他ブラウザーでは問題ないのに何故かクロームだけフォントサイズが変更できない。
厳密に言うと「大きくはなるのに、小さくならない」。
同環境のスタッフのPCではクロームでも問題なく表示されるっていうのが問題を更に複雑にさせていたんだけど、ようやく原因が判明した!!

全然知らんかったけどクロームには「最小フォントサイズ」っていうのが存在するのだ。
これ英語版のクロームだとデフォルト設定されていない(スタッフのPCはだから大丈夫だった)んだけど日本語版クロームだと、ミニマム10pxってのにデフォルトで設定されている。

ようはクロームの場合は10px以下のフォントは基本的にきかないのだ。

設定の変更方法

まずクロームのメニューから「環境設定」をクリックする。
すると下記のような画面が表示される。

フォントサイズ

次に「フォントのカスタマイズ」をクリックしよう。

最小フォントサイズ

項目の中に「最小フォントサイズ」というのが確認できただろうか。
そう、、、これが問題の原因なのだ!!
デフォルトでは10pxに設定されているが、これを1pxとかに変更すればクロームでも10px以下のサイズで表示させることができる!

10px以下のフォントは使わない方が良い

ただ残念ながらこれでは解決にならない。
だってデフォルトで10に設定されてるなんてこと、9割の人知らないからね。
「それはクロームの設定の問題です」
っていうのはこのバグでは通用しないだろう。

いちをJsの設定で何とかできるというような情報もあるが、基本的には10px以下のフォントは使わないか、どうしても使いたい時は画像で入れ込むような解決にした方が安全そうだ。

まとめ

久々にハマったので勢いでブログにしてみた。
「最小フォントサイズ」恐るべし!


you may also like
3月 19 2016

セブ島のピザ屋さん「Pizza Republic」でallトッピングピザを頼んでみた。

5月 5 2017

海外生活3年目の壁と出戻り組

7月 28 2013

マニラにピクニック〜セブから見たマニラとマニラから見たセブ

Web制作のご相談・お見積もり・セブについてのご質問

お問い合わせはこちら
page top