font-size 10px未満が適用されるかどうか試してみる

font-size 10px未満の指定をした際、以前のchromeだと10pxで表示される仕様になっていたのですが、現在ではその制限がなくなっているようだったので、他ブラウザを含めて10px未満の指定が問題ないのかを試してみます。

サンプルコード

0〜11pxのテキストを並べて比較してみます。

<p class="fz11">font-size: 11px</p>
<p class="fz10">font-size: 10px</p>
<p class="fz9">font-size: 9px</p>
<p class="fz8">font-size: 8px</p>
<p class="fz7">font-size: 7px</p>
<p class="fz6">font-size: 6px</p>
<p class="fz5">font-size: 5px</p>
<p class="fz4">font-size: 4px</p>
<p class="fz3">font-size: 3px</p>
<p class="fz2">font-size: 2px</p>
<p class="fz1">font-size: 1px</p>
<p class="fz0">font-size: 0px</p>

.fz11 {
	font-size: 11px;
}
.fz10 {
	font-size: 10px;
}
.fz9 {
	font-size: 9px;
}
.fz8 {
	font-size: 8px;
}
.fz7 {
	font-size: 7px;
}
.fz6 {
	font-size: 6px;
}
.fz5 {
	font-size: 5px;
}
.fz4 {
	font-size: 4px;
}
.fz3 {
	font-size: 3px;
}
.fz2 {
	font-size: 2px;
}
.fz1 {
	font-size: 1px;
}
.fz0 {
	font-size: 0px;
}

font-size比較のデモページ

chromeを中心に他ブラウザでも表示を確認してみましたが、どのブラウザでも以下のような表示で、font-sizeの指定は適用されているようでした。

この仕様変更はchrome118以降で適用されているようです。
ただ10px未満の指定も表示できるようになったものの、文字が小さすぎると読みにくい点は変わらないので、10px未満の文字サイズは基本的には使用しない前提の方がよさそうです。