Chromeは10px未満のフォントサイズは、自動的に10pxにしてしまう!
もちろん可読性を上げるには10px以上がいいんですが、、、
たまにデザインで極小のアルファベットなどをコーディングで表現したい時があるんですよね。
transformを活用
フォントサイズは10pxに設定し、transformで縮小します!
例えば、8pxを表現したい場合は以下
font-size: 10px;
transform: scale(.8);
transform-origin: left;
transformのscaleで縮小します。
ポイントは「transform-origin: left;」。transform-originは変形の支点を設定できます。これを設定しないと、中央で縮小されてしまうので左揃えにならなくなります。