差分

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

--- html_css:minimum_font-size_for_each_browser [2020/03/14 15:49] – ともやん
+++ 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 style="font-family:sans-serif; font-size: xx-small;">ABCDE abcde 12345 あいうえお</span></html>  |
+| 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 style="font-family:sans-serif; font-size: x-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 style="font-family:sans-serif; font-size: 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 style="font-family:sans-serif; font-size: medium;">ABCDE abcde 12345 あいうえお</span></html>  |
+| :::  | :::  |  medium | <html><span class="fnt_sans_serif" style="font-size: medium;">ABCDE abcde 12345 あいうえお</span></html>  |
-| :::  | :::  |  large | <html><span style="font-family:sans-serif; font-size: large;">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 style="font-family:sans-serif; font-size: x-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 style="font-family:sans-serif; font-size: xx-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 style="font-family:sans-serif; font-size: 8px;">ABCDE abcde 12345 あいうえお</span></html>  |
+| :::  | :::  |  8px | <html><span class="fnt_sans_serif" style="font-size: 8px;">ABCDE abcde 12345 あいうえお</span></html>  |
-| :::  | :::  |  10px | <html><span style="font-family:sans-serif; font-size: 10px;">ABCDE abcde 12345 あいうえお</span></html>  |
+| :::  | :::  |  10px | <html><span class="fnt_sans_serif" style="font-size: 10px;">ABCDE abcde 12345 あいうえお</span></html>  |
-| :::  | :::  |  12px | <html><span style="font-family:sans-serif; font-size: 12px;">ABCDE abcde 12345 あいうえお</span></html>  |
+| :::  | :::  |  12px | <html><span class="fnt_sans_serif" style="font-size: 12px;">ABCDE abcde 12345 あいうえお</span></html>  |
-| :::  | :::  |  24px | <html><span style="font-family:sans-serif; font-size: 24px;">ABCDE abcde 12345 あいうえお</span></html>  |
+| :::  | :::  |  24px | <html><span class="fnt_sans_serif" style="font-size: 24px;">ABCDE abcde 12345 あいうえお</span></html>  |
-| :::  | :::  |  48px | <html><span style="font-family:sans-serif; font-size: 48px;">ABCDE abcde 12345 あいうえお</span></html>  |
+| :::  | :::  |  48px | <html><span class="fnt_sans_serif" style="font-size: 48px;">ABCDE abcde 12345 あいうえお</span></html>  |
-| :::  | :::  |  96px | <html><span style="font-family:sans-serif; font-size: 96px;">ABCDE abcde 12345 あいうえお</span></html>  |
+| :::  | :::  |  96px | <html><span class="fnt_sans_serif" style="font-size: 96px;">ABCDE abcde 12345 あいうえお</span></html>  |
-| HackGen\\ (Web Font)  | HackGen  |  xx-small | <html><span style="font-family:"HackGen"; font-size: xx-small;">ABCDE abcde 12345 あいうえお</span></html>  |
-| :::  | :::  |  x-small | <html><span style="font-family:"HackGen"; font-size: x-small;">ABCDE abcde 12345 あいうえお</span></html>  |
+==== Sawarabi Gothic ====
-| :::  | :::  |  small | <html><span style="font-family:"HackGen"; font-size: small;">ABCDE abcde 12345 あいうえお</span></html>  |
+^  フォントファミリー  ^  フォント名  ^ サイズ ^  サンプル  ^
-| :::  | :::  |  medium | <html><span style="font-family:"HackGen"; font-size: medium;">ABCDE abcde 12345 あいうえお</span></html>  |
+| Sawarabi Gothic\\ (Web Font)  | Sawarabi Gothic  |  xx-small | <html><span class="fnt_sawarabi" style="font-size: xx-small;">ABCDE abcde 12345 あいうえお</span></html>  |
-| :::  | :::  |  large | <html><span style="font-family:"HackGen"; font-size: large;">ABCDE abcde 12345 あいうえお</span></html>  |
+| :::  | :::  |  x-small | <html><span class="fnt_sawarabi" style="font-size: x-small;">ABCDE abcde 12345 あいうえお</span></html>  |
-| :::  | :::  |  x-large | <html><span style="font-family:"HackGen"; font-size: x-large;">ABCDE abcde 12345 あいうえお</span></html>  |
+| :::  | :::  |  small | <html><span class="fnt_sawarabi" style="font-size: small;">ABCDE abcde 12345 あいうえお</span></html>  |
-| :::  | :::  |  xx-large | <html><span style="font-family:"HackGen"; font-size: xx-large;">ABCDE abcde 12345 あいうえお</span></html>  |
+| :::  | :::  |  medium | <html><span class="fnt_sawarabi" style="font-size: medium;">ABCDE abcde 12345 あいうえお</span></html>  |
-| :::  | :::  |  8px | <html><span style="font-family:"HackGen"; font-size: 8px;">ABCDE abcde 12345 あいうえお</span></html>  |
+| :::  | :::  |  large | <html><span class="fnt_sawarabi" style="font-size: large;">ABCDE abcde 12345 あいうえお</span></html>  |
-| :::  | :::  |  10px | <html><span style="font-family:"HackGen"; font-size: 10px;">ABCDE abcde 12345 あいうえお</span></html>  |
+| :::  | :::  |  x-large | <html><span class="fnt_sawarabi" style="font-size: x-large;">ABCDE abcde 12345 あいうえお</span></html>  |
-| :::  | :::  |  12px | <html><span style="font-family:"HackGen"; font-size: 12px;">ABCDE abcde 12345 あいうえお</span></html>  |
+| :::  | :::  |  xx-large | <html><span class="fnt_sawarabi" style="font-size: xx-large;">ABCDE abcde 12345 あいうえお</span></html>  |
-| :::  | :::  |  24px | <html><span style="font-family:"HackGen"; font-size: 24px;">ABCDE abcde 12345 あいうえお</span></html>  |
+| :::  | :::  |  8px | <html><span class="fnt_sawarabi" style="font-size: 8px;">ABCDE abcde 12345 あいうえお</span></html>  |
-| :::  | :::  |  48px | <html><span style="font-family:"HackGen"; font-size: 48px;">ABCDE abcde 12345 あいうえお</span></html>  |
+| :::  | :::  |  10px | <html><span class="fnt_sawarabi" style="font-size: 10px;">ABCDE abcde 12345 あいうえお</span></html>  |
-| :::  | :::  |  96px | <html><span style="font-family:"HackGen"; font-size: 96px;">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>  |
 ===== 参考文献 =====