ラベルやアイコンで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/