Q&A
聞きたいこと
表題の通りです。html/cssでフォントサイズを徐々に小さくしていくと、9px当たりで限界がきてそれより小さいフォントサイズで文字を表示することができません。
なぜこのような仕様になっているのでしょうか
ソースコード
html
1<body> 2 <div style="font-size:12px">12px</div> 3 <div style="font-size:11px">11px</div> 4 <div style="font-size:10px">10px</div> 5 <div style="font-size:9px">9px</div> 6 <div style="font-size:8px">8px</div> 7 <div style="font-size:7px">7px</div> 8 <div style="font-size:6px">6px</div> 9 <div style="font-size:5px">5px</div> 10 <div style="font-size:4px">4px</div> 11 <div style="font-size:3px">3px</div> 12</body>
見た目
回答5件
0
ちなみにChromeでは
[設定] > [デザイン] > [フォントをカスタマイズ] > [最小フォントサイズ]
より最小フォントサイズを設定できます。
投稿2022/11/17 00:19
総合スコア3191
0
ベストアンサー
ちゃんと調べたわけではないので実際のところは分かりませんが、昔職場で聞いたところ、「可読性が非常に悪く読めないサイズにならないように、ブラウザで最小フォントサイズが設定されている」 と教えていただきました。
ちなみにscale()で無理やり小さくすることもできます…
html
1<p class="fz6">6px</p> 2<style> 3 .fz6 { 4 font-size: 10px; 5 transform: scale(0.6); /* 10px * 0.6 = 6px */ 6 transform-origin: 0 0; /* 左寄せにするために、変形の基点を左上に */ 7 } 8</style>
投稿2022/11/11 06:56
総合スコア2316
0
各種ブラウザで最小の文字サイズがあって、それ以下になると自動調整されるようになっています。
text-size-adjustを100%に設定することでこれを実質的に無効化できます。
css
1html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
投稿2022/11/15 00:02
総合スコア7834
0
提示のHTMLをVSCodeのLive Server拡張機能を使用し、手元の環境で各種ブラウザで閲覧してみました。（※結果を保証するものではありません）
Windows10 21H1
質問欄記載画像同様、9px程度から同サイズ
- Microsoft Edge
- Google Chrome
以下ブラウザではfontsizeが反映されました。
- Firefox（下記画像）
- Internet Explorer
- LivePreview(VSCode内でのHTMLプレビュー拡張機能)
Android12
fontsizeが反映
- Microsoft Edge
- Google Chrome
同じChromeやedgeでも環境によって結果が異なりました。
小さいサイズではとてもじゃないですが、判読できません。
公式ドキュメントなど確認しておらず明確な理由はわかりません。
ただ上記結果より、表示解像度や表示サイズなど閲覧状況を考慮しユーザビリティの観点から、開発サイドがフォントサイズの制限をしている場合があるのではないかと推定します。
追記
こんなのありました
参考：
各ブラウザの最小フォントサイズ
投稿2022/11/11 08:58
編集2022/11/11 09:17
総合スコア509
0
質問者さんが使っているブラウザに最小フォントサイズが設定されているのでしょう。
SVG の <text> を使うとブラウザの最小フォントサイズ設定よりも小さいフォントを使うことができます。
投稿2022/11/11 05:33
編集2022/11/11 05:44
総合スコア21927
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。