font-sizeが小さくならない、効かない場合の対処法

font-sizeを最小値にしても文字サイズが正常のものと比較して大きくなってしまう場合の対処法をお伝えします。

font-sizeが小さくならない、効かない問題

google chromeの画面で反映される最小のfont-sizeは10pxです。

これを下記のように10pxに設定しても反映されない(文字サイズが10px以上になっている)場合があります。

font-sizeが小さくならない、効かない解決策

font-sizeが小さくならない解決策1.<head></head>内のファイルに原因がないか確認する。例としては以下のような記載のbootstrapファイルが原因なこともあります。

font-sizeが小さくならない解決策2.bootstrapファイルや他のファイルの表記を変える

Google Chromeの検証機能で、対象のfontがbootstrapファイルで指定されていたり、他のファイルで指定されていることがあります。その場合は、対象ファイルのfont-size表記を変えましょう。

font-sizeが小さくならない解決策3.ファイルごと変える

上記を変えてもダメ、もしくは1つ1つどのbootstrapファイルが影響を与えているか調べるのが面倒な場合は新たなファイルを作成して作りましょう。

少し怖いですが、私はこれで直りました。

font-sizeが小さくならない解決策4.font-sizeを最小サイズの10px以下にする

font-sizeを規定しているclassに以下4つを記載しましょう。下記のコードの(0.4)を変更することでサイズを変更できます。ただ周辺のコンテンツとの間に幅が出来てしまうのが難点です。

CSS