【CSS】フォントサイズを限界を超えて小さくする
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かはわからないので、
見た目で微調整して、ちょうどいいサイズを探りましょう!
One thought on “【CSS】フォントサイズを限界を超えて小さくする”
Comments are closed.