html_css:minimum_font-size_for_each_browser

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

次のリビジョン		 前のリビジョン
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] (現在) – [最小フォント] ともやん
行 1: 行 1:
 ====== ブラウザ別 最小フォントサイズ ====== ====== ブラウザ別 最小フォントサイズ ======
 +
 +===== 最小フォント =====
 +^  ブラウザ  ^  フォントサイズ  ^  サンプル  ^
 +| 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]]\\
  
  • html_css/minimum_font-size_for_each_browser.1584164136.txt.gz
  • 最終更新: 2020/03/14 14:35
  • by ともやん