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未満の文字サイズは基本的には使用しない前提の方がよさそうです。

参考サイト

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2024年12月
1234567
891011121314
15161718192021
22232425262728
293031