【簡単】CSSでフォントサイズ（font-size）を10px以下で表示する方法
フォントサイズ（font-size）を10px以下に指定したのに小さくならない。
これはブラウザの仕様によるものでChromeだと10px、safariだと9pxと規定があります。
本記事では、CSSのtransformプロパティを使って、見た目上10px以下にする方法について解説します。
transformを指定する
p {
font-size: 10px;
transform: scale(0.8);
}
10px以下にしたいhtml要素にtransform: scale(倍率);を指定します。
CSSのtransform: scale();を使うことで要素を拡大・縮小する事ができます。
scale値に縮小倍率を入れます。1以下の値を入れる事で、設定しているフォントサイズを縮小してくれます。
以上で解決です。
まとめ
スマホのフォントサイズを指定する時、デザイン上どうしても10px以下にしなければいけない場合は本記事を参考にtransformプロパティを使いましょう。
基本テキストのサイズは16px以下だとスマホのユーザビリティを下げるので避けた方が良いです。
以上で解説を終わります。
目次
