system-font-rfp-ref.html (928B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <style> 4 body { 5 font-family: -apple-system, sans-serif; 6 font-size: 12px; 7 } 8 9 .android { 10 font-family: Roboto; 11 } 12 13 .linux { 14 font-size: 15px; 15 } 16 17 .mac { 18 .caption, .menu { 19 font-size: 13px; 20 } 21 .message-box, .status-bar { 22 font-size: 11px; 23 } 24 .small-caption { 25 font-size: 11px; 26 font-weight: 700; 27 } 28 } 29 </style> 30 <div class="caption">Caption</div> 31 <div class="icon">Icon</div> 32 <div class="menu">Menu</div> 33 <div class="message-box">Message box</div> 34 <div class="small-caption">Small caption</div> 35 <div class="status-bar">Status bar</div> 36 <script> 37 if (navigator.platform.startsWith("Mac")) { 38 document.querySelector("body").className = "mac"; 39 } else if (navigator.userAgent.includes("Android")) { 40 document.querySelector("body").className = "android"; 41 } else if (navigator.platform.startsWith("Linux")) { 42 document.querySelector("body").className = "linux"; 43 } 44 </script>