【CSS】Chromeでfont-sizeが10px未満のテキストを表示する
Chromeでは可読性の観点から最小フォントサイズが10px
に定められているので、それより小さいfont-size
の値を指定してもブラウザ上では10px
で表示されてしまう。
画像を使用する方法もあるが、CSSのみで何とかfont-size: 10px
未満のテキストを表示したい。
解決法
<p>サンプルのテキストです。サンプルのテキストです。サンプルのテキストです。</p>
p { font-size: 10px; transform: scale(0.9); transform-origin: left;}
scale
で任意のサイズに縮小することで実現できる。(上記の例では擬似的に9px
にしている)
また、縮小の原点を文頭にしたい場合はtransform-origin: left
も必要となる。
<span>サンプルのテキストです。サンプルのテキストです。サンプルのテキストです。</span>
span { display: block; font-size: 10px; transform: scale(0.9); transform-origin: left;}
ちなみに対象のテキストがインライン要素の場合はdisplay: block
でブロック要素にする必要がある。