Chromeでの10px未満の文字サイズ指定とtransform: scaleの利用

Webデザインやフロントエンドの開発において、特定のブラウザでの表示の違いはよく発生する問題です。特に、Chromeブラウザでは文字サイズを10px未満で指定しても、実際には10pxとして表示されてしまうという問題が知られています。

この問題に対処するための一つの方法として、CSSのtransform: scale()を利用する手法があります。このプロパティを利用することで、要素を拡大・縮小表示することができます。

使用例：

.small-text {
  font-size: 10px;
  transform: scale(0.8);
}

上記の例では、文字サイズを10pxに指定した後、transform: scale(0.8)でそのサイズの80%の大きさに縮小して表示することができます。

ただし、transform: scale()を利用すると、他の要素とのレイアウトに影響が出る場合があるため、適用する際は十分なテストが必要です。