【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
でブロック要素にする必要がある。