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