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