次のリビジョン | 前のリビジョン |
html_css:minimum_font-size_for_each_browser [2020/03/14 14:35] – 作成 ともやん | html_css:minimum_font-size_for_each_browser [2020/03/14 17:39] (現在) – [最小フォント] ともやん |
---|
====== ブラウザ別 最小フォントサイズ ====== | ====== ブラウザ別 最小フォントサイズ ====== |
| |
| ===== 最小フォント ===== |
| ^ ブラウザ ^ フォントサイズ ^ サンプル ^ |
| | Android Chrome | 1px | <html><span style="font-size: 1px;">1234567890</span></html> | |
| | Android FireFox | 1px | <html><span style="font-size: 1px;">1234567890</span></html> | |
| | Android Edge | 1px | <html><span style="font-size: 1px;">1234567890</span></html> | |
| | Windows Chrome | 10px | <html><span style="font-size: 10px;">1234567890</span></html> | |
| | Windows FireFox | 1px | <html><span style="font-size: 1px;">1234567890</span></html> | |
| | Windows Edge | 1px | <html><span style="font-size: 1px;">1234567890</span></html> | |
| | iOS Chrome | 1px | <html><span style="font-size: 1px;">1234567890</span></html> | |
| | iOS FireFox | 1px | <html><span style="font-size: 1px;">1234567890</span></html> | |
| | iOS Edge | 1px | <html><span style="font-size: 1px;">1234567890</span></html> | |
| | iOS Safari | 1px | <html><span style="font-size: 1px;">1234567890</span></html> | |
| |
| |
| ===== サンプル ===== |
| <html> |
| <style> |
| .fnt_sans_serif { |
| font-family: sans-serif; |
| } |
| .fnt_sawarabi { |
| font-family: 'Sawarabi Gothic'; |
| } |
| .fnt_hackgen { |
| font-famiry: 'HackGen'; |
| } |
| </style> |
| </html> |
| |
| ==== sans-serif ==== |
| ^ フォントファミリー ^ フォント名 ^ サイズ ^ サンプル ^ |
| | sans-serif | sans-serif | xx-small | <html><span class="fnt_sans_serif" style="font-size: xx-small;">ABCDE abcde 12345 あいうえお</span></html> | |
| | ::: | ::: | x-small | <html><span class="fnt_sans_serif" style="font-size: x-small;">ABCDE abcde 12345 あいうえお</span></html> | |
| | ::: | ::: | small | <html><span class="fnt_sans_serif" style="font-size: small;">ABCDE abcde 12345 あいうえお</span></html> | |
| | ::: | ::: | medium | <html><span class="fnt_sans_serif" style="font-size: medium;">ABCDE abcde 12345 あいうえお</span></html> | |
| | ::: | ::: | large | <html><span class="fnt_sans_serif" style="font-size: large;">ABCDE abcde 12345 あいうえお</span></html> | |
| | ::: | ::: | x-large | <html><span class="fnt_sans_serif" style="font-size: x-large;">ABCDE abcde 12345 あいうえお</span></html> | |
| | ::: | ::: | xx-large | <html><span class="fnt_sans_serif" style="font-size: xx-large;">ABCDE abcde 12345 あいうえお</span></html> | |
| | ::: | ::: | 8px | <html><span class="fnt_sans_serif" style="font-size: 8px;">ABCDE abcde 12345 あいうえお</span></html> | |
| | ::: | ::: | 10px | <html><span class="fnt_sans_serif" style="font-size: 10px;">ABCDE abcde 12345 あいうえお</span></html> | |
| | ::: | ::: | 12px | <html><span class="fnt_sans_serif" style="font-size: 12px;">ABCDE abcde 12345 あいうえお</span></html> | |
| | ::: | ::: | 24px | <html><span class="fnt_sans_serif" style="font-size: 24px;">ABCDE abcde 12345 あいうえお</span></html> | |
| | ::: | ::: | 48px | <html><span class="fnt_sans_serif" style="font-size: 48px;">ABCDE abcde 12345 あいうえお</span></html> | |
| | ::: | ::: | 96px | <html><span class="fnt_sans_serif" style="font-size: 96px;">ABCDE abcde 12345 あいうえお</span></html> | |
| |
| ==== Sawarabi Gothic ==== |
| ^ フォントファミリー ^ フォント名 ^ サイズ ^ サンプル ^ |
| | Sawarabi Gothic\\ (Web Font) | Sawarabi Gothic | xx-small | <html><span class="fnt_sawarabi" style="font-size: xx-small;">ABCDE abcde 12345 あいうえお</span></html> | |
| | ::: | ::: | x-small | <html><span class="fnt_sawarabi" style="font-size: x-small;">ABCDE abcde 12345 あいうえお</span></html> | |
| | ::: | ::: | small | <html><span class="fnt_sawarabi" style="font-size: small;">ABCDE abcde 12345 あいうえお</span></html> | |
| | ::: | ::: | medium | <html><span class="fnt_sawarabi" style="font-size: medium;">ABCDE abcde 12345 あいうえお</span></html> | |
| | ::: | ::: | large | <html><span class="fnt_sawarabi" style="font-size: large;">ABCDE abcde 12345 あいうえお</span></html> | |
| | ::: | ::: | x-large | <html><span class="fnt_sawarabi" style="font-size: x-large;">ABCDE abcde 12345 あいうえお</span></html> | |
| | ::: | ::: | xx-large | <html><span class="fnt_sawarabi" style="font-size: xx-large;">ABCDE abcde 12345 あいうえお</span></html> | |
| | ::: | ::: | 8px | <html><span class="fnt_sawarabi" style="font-size: 8px;">ABCDE abcde 12345 あいうえお</span></html> | |
| | ::: | ::: | 10px | <html><span class="fnt_sawarabi" style="font-size: 10px;">ABCDE abcde 12345 あいうえお</span></html> | |
| | ::: | ::: | 12px | <html><span class="fnt_sawarabi" style="font-size: 12px;">ABCDE abcde 12345 あいうえお</span></html> | |
| | ::: | ::: | 24px | <html><span class="fnt_sawarabi" style="font-size: 24px;">ABCDE abcde 12345 あいうえお</span></html> | |
| | ::: | ::: | 48px | <html><span class="fnt_sawarabi" style="font-size: 48px;">ABCDE abcde 12345 あいうえお</span></html> | |
| | ::: | ::: | 96px | <html><span class="fnt_sawarabi" style="font-size: 96px;">ABCDE abcde 12345 あいうえお</span></html> | |
| |
| ==== HackGen ==== |
| ^ フォントファミリー ^ フォント名 ^ サイズ ^ サンプル ^ |
| | HackGen\\ (Web Font) | HackGen | xx-small | <html><span class="fnt_hackgen" style="font-size: xx-small;">ABCDE abcde 12345 あいうえお</span></html> | |
| | ::: | ::: | x-small | <html><span class="fnt_hackgen" style="font-size: x-small;">ABCDE abcde 12345 あいうえお</span></html> | |
| | ::: | ::: | small | <html><span class="fnt_hackgen" style="font-size: small;">ABCDE abcde 12345 あいうえお</span></html> | |
| | ::: | ::: | medium | <html><span class="fnt_hackgen" style="font-size: medium;">ABCDE abcde 12345 あいうえお</span></html> | |
| | ::: | ::: | large | <html><span class="fnt_hackgen" style="font-size: large;">ABCDE abcde 12345 あいうえお</span></html> | |
| | ::: | ::: | x-large | <html><span class="fnt_hackgen" style="font-size: x-large;">ABCDE abcde 12345 あいうえお</span></html> | |
| | ::: | ::: | xx-large | <html><span class="fnt_hackgen" style="font-size: xx-large;">ABCDE abcde 12345 あいうえお</span></html> | |
| | ::: | ::: | 8px | <html><span class="fnt_hackgen" style="font-size: 8px;">ABCDE abcde 12345 あいうえお</span></html> | |
| | ::: | ::: | 10px | <html><span class="fnt_hackgen" style="font-size: 10px;">ABCDE abcde 12345 あいうえお</span></html> | |
| | ::: | ::: | 12px | <html><span class="fnt_hackgen" style="font-size: 12px;">ABCDE abcde 12345 あいうえお</span></html> | |
| | ::: | ::: | 24px | <html><span class="fnt_hackgen" style="font-size: 24px;">ABCDE abcde 12345 あいうえお</span></html> | |
| | ::: | ::: | 48px | <html><span class="fnt_hackgen" style="font-size: 48px;">ABCDE abcde 12345 あいうえお</span></html> | |
| | ::: | ::: | 96px | <html><span class="fnt_hackgen" style="font-size: 96px;">ABCDE abcde 12345 あいうえお</span></html> | |
| |
===== 参考文献 ===== | ===== 参考文献 ===== |
[[https://www.weblab.co.jp/staff/design/8557.html|ブラウザごとの最小フォントサイズ一覧 | ウェブラボ(株)スタッフブログ]]\\ | [[https://www.weblab.co.jp/staff/design/8557.html|ブラウザごとの最小フォントサイズ一覧 | ウェブラボ(株)スタッフブログ]]\\ |
| [[http://www.htmq.com/style/font-size.shtml|font-size-スタイルシートリファレンス]]\\ |
| [[https://anyushu.com/web/fonts-osusume/|2020年流行?font-familyのオススメ設定はこれ!【CSS】]]\\ |
| [[https://fonts.google.com/|Google Fonts]]\\ |
| |