📝

Chromeで10px以下の文字を表示する

1 min read

Chromeの最小文字サイズは10pxとなっていて、それ以下の文字サイズを指定しても10pxになってしまう。
10px以下の文字サイズを表現したいときは、transformのscaleで要素のサイズを縮小することで表現することが出来る。
(そもそも小さい文字は読みづらくユーザビリティが良くないので、10px以下の文字を表現することはなないと思うが・・・)

transform:scale(x);を使う

p {
  font-size: 10px;
  transform: scale(0.8);
  transform-origin: left;
}

上のコードを使うことで、pタグで囲われている文字は 10px * 0.8 = 8pxで表現される。
が、transform-originの初期値はcenterなので、意図しない位置に表示された場合はこちらを調整する必要がある。

参考

Discussion

ログインするとコメントできます