ChromeではCSSのfont-sizeでは10px以下に指定できません。

スマートフォンでも最低サイズが決まっている端末もあるようです。

コーディングしていた時に、長めのcopyrightをスマホサイズで一行におさめて欲しいと言われて、
これ以上フォントサイズをCSSで下げられなくて困った時にやった対処法です。

デモサイト

どんどん小さくしています。

最後はもう読めないですけど（笑）

ちなみに書いてる英文は和訳すると情けは人の為ならずです。

ちょっと意味を勘違いされやすいことわざですが、
「人に情けをかけるのは、その人のためになるばかりでなく、やがてはめぐりめぐって自分に返ってくる。人には親切にせよ」という意味です。

つまり続きがあるんですね、「情けは人のためではなく、自分に返ってくるもの」みたいな感じでしょうか。

話は戻って、以下その方法です。

transform:scaleを使う

transform:scaleで無理やり小さくします。

例えばこんな感じです。

p {
  font-size: 12px;
  -moz-transform: scale(0.5);
  -webkit-transform: scale(0.5);
  -o-transform: scale(0.5);
  -ms-transform: scale(0.5);
  transform: scale(0.5);
}

これだと12pxも文字が半分なので6px…というわけではないみたいです。

小さくなることはなるんですが正確に何pxかはわからないので、
見た目で微調整して、ちょうどいいサイズを探りましょう！

Tweet

Pocket