specimen.html 3.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width,initial-scale=1.0">
  6. <title>Fira Code Fixed Specimen</title>
  7. <link rel="stylesheet" href="fira_code.css">
  8. <style>
  9. body { font: 14px/1.5em "Fira Code Fixed"; }
  10. .code {
  11. font-feature-settings: "calt" 1; /* Enable ligatures for IE 10+, Edge */
  12. text-rendering: optimizeLegibility; /* Force ligatures for Webkit, Blink, Gecko */
  13. width: 30em;
  14. margin: 5em auto;
  15. white-space: pre-wrap;
  16. word-break: break-all;
  17. }
  18. .light { font-weight: 300; }
  19. .regular { font-weight: 400; }
  20. .medium { font-weight: 500; }
  21. .semibold { font-weight: 600; }
  22. .bold { font-weight: 700; }
  23. .variable { font-family: 'Fira Code Fixed VF'; font-variation-settings: 'wght' 400; }
  24. i { font-style: normal; color: #c33; }
  25. b { font-weight: inherit; color: #c33; }
  26. </style>
  27. <script type="text/javascript">
  28. function onWeightChange(weight) {
  29. // code_variable.style['font-weight'] = weight;
  30. code_variable.style['font-variation-settings'] = "'wght' " + weight;
  31. span_wght.innerText = weight;
  32. }
  33. </script>
  34. <body>
  35. <div class="code light"><b># Fira Code Fixed Light</b>
  36. take = (n, [x, <i>...</i>xs]:list) <i>--&gt;</i>
  37. | n <i>&lt;=</i> 0 <i>=&gt;</i> []
  38. | empty list <i>=&gt;</i> []
  39. | otherwise <i>=&gt;</i> [x] <i>++</i> take n-1, xs
  40. last3 = reverse <i>&gt;&gt;</i> take 3 <i>&gt;&gt;</i> reverse</div>
  41. <div class="code regular"><b># Fira Code Fixed Regular</b>
  42. take = (n, [x, <i>...</i>xs]:list) <i>--></i>
  43. | n <i>&lt;=</i> 0 <i>=&gt;</i> []
  44. | empty list <i>=&gt;</i> []
  45. | otherwise <i>=&gt;</i> [x] <i>++</i> take n-1, xs
  46. last3 = reverse <i>&gt;&gt;</i> take 3 <i>&gt;&gt;</i> reverse</div>
  47. <div class="code medium"><b># Fira Code Fixed Medium</b>
  48. take = (n, [x, <i>...</i>xs]:list) <i>--&gt;</i>
  49. | n <i>&lt;=</i> 0 <i>=&gt;</i> []
  50. | empty list <i>=&gt;</i> []
  51. | otherwise <i>=&gt;</i> [x] <i>++</i> take n-1, xs
  52. last3 = reverse <i>&gt;&gt;</i> take 3 <i>&gt;&gt;</i> reverse</div>
  53. <div class="code semibold"><b># Fira Code Fixed SemiBold</b>
  54. take = (n, [x, <i>...</i>xs]:list) <i>--&gt;</i>
  55. | n <i>&lt;=</i> 0 <i>=&gt;</i> []
  56. | empty list <i>=&gt;</i> []
  57. | otherwise <i>=&gt;</i> [x] <i>++</i> take n-1, xs
  58. last3 = reverse <i>&gt;&gt;</i> take 3 <i>&gt;&gt;</i> reverse</div>
  59. <div class="code bold"><b># Fira Code Fixed Bold</b>
  60. take = (n, [x, <i>...</i>xs]:list) <i>--&gt;</i>
  61. | n <i>&lt;=</i> 0 <i>=&gt;</i> []
  62. | empty list <i>=&gt;</i> []
  63. | otherwise <i>=&gt;</i> [x] <i>++</i> take n-1, xs
  64. last3 = reverse <i>&gt;&gt;</i> take 3 <i>&gt;&gt;</i> reverse</div>
  65. <div id="code_variable" class="code variable"><b># Fira Code Fixed Variable</b>
  66. <input type="range" min="300" max="700" value="400" step="10" style="width: 300px;" oninput="onWeightChange(this.value)" onchange="onWeightChange(this.value)"> <span id="span_wght">400</span>
  67. take = (n, [x, <i>...</i>xs]:list) <i>--&gt;</i>
  68. | n <i>&lt;=</i> 0 <i>=&gt;</i> []
  69. | empty list <i>=&gt;</i> []
  70. | otherwise <i>=&gt;</i> [x] <i>++</i> take n-1, xs
  71. last3 = reverse <i>&gt;&gt;</i> take 3 <i>&gt;&gt;</i> reverse</div>