スマホでfont-size 10px以下の文字を表示する

ラベルやアイコンで10px以下の小さな文字を使いたい。そんな場合画像で対応していませんか。

Google Chrome では10px、Safari では9pxが最小表示単位となっています。
10px以下の文字が表示できないChromeでもCSSで対応できる方法です。

#解決コード
こちらが解決コードです。続いて解説をしていきますね🙂

CSS

.hoge{
display:block;
font-size: 10px;
transform: scale(0.8);
transform-origin:0 0;
}

#1.transformで縮小する
font-sizeを10pxで指定し、
transform80%表示＝font-size8px相当で表示します。
10pxを指定すると計算が楽です。

CSS

font-size: 10px;
transform: scale(0.8);

#2.display: blockを指定する
縮小する要素がインライン要素の場合は display: block; を忘れずに。
インライン要素にはtransformが効きません。

CSS

display:block;

#3.transform-originを指定する

transformで縮小指定すると、縮小した分が中央に表示されてしまいます。
transform-origin:0 0; で位置指定をしておきます。

CSS

transform-origin:0 0;

これで小さい文字もテキストで表示できます。
単純な方法で対応できる方法を考えた人…スーパー頭いい！！

#参考サイト

以下のサイトを参考にさせていただきました。
いつもお世話になっております🙆🏻‍♀️

Google Chromeでfont-sizeが10px以下にならない時の対処法
https://kotori-blog.com/soft/chromefontsize/

font-sizeを10px以下に指定したい！そんな時に使えるCSSの書き方｜それゆけ！アラサー乙女 | それゆけ！アラサー乙女
https://chasoko-log.com/fontsize-lesstah10px-css/