tynanpurdy.com
[READ-ONLY] Mirror of https://github.com/tynanpurdy/real-font-size. Tiny calculator that tells you the real dimensions of text, not its bounding box
tynanpurdy.github.io/real-font-size/
3.5 kB
109 lines
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 <link rel="stylesheet" href="style.css" />
7 <title>Real Font Size</title>
8 </head>
9 <!-- Google tag (gtag.js) -->
10 <script
11 async
12 src="https://www.googletagmanager.com/gtag/js?id=G-K4R6RNTHT5"
13 ></script>
14 <script>
15 window.dataLayer = window.dataLayer || [];
16 function gtag() {
17 dataLayer.push(arguments);
18 }
19 gtag("js", new Date());
20
21 gtag("config", "G-K4R6RNTHT5");
22 </script>
23 <body>
24 <header>
25 <h1><i>Real</i> Font Size</h1>
26 </header>
27
28 <main>
29 <div class="launchFonts flex row">
30 <i>Type the name of any font on your device</i>
31 <button id="launchFonts">(<i>See your fonts</i>)</button>
32 </div>
33 <div class="flex row">
34 <div class="typeInputs flex row" id="typeInputs">
35 <input type="text" id="fontInput" value="Arial" />
36
37 <select class="form-control" id="fontWeightInput">
38 <option value="100">Thin</option>
39 <option value="200">Extra Light</option>
40 <option value="300">Light</option>
41 <option value="400" selected>Regular</option>
42 <option value="500">Medium</option>
43 <option value="600">Semi Bold</option>
44 <option value="700">Bold</option>
45 <option value="800">Extra Bold</option>
46 <option value="900">Black</option>
47 </select>
48
49 <div class="group-row">
50 <input
51 type="number"
52 class="form-control"
53 id="typeSizeInput"
54 inputmode="decimal"
55 min="1"
56 max="400"
57 value="12"
58 />
59
60 <select class="form-control" id="typeUnitsInput">
61 <option value="px">px</option>
62 <option value="pt">pt</option>
63 </select>
64 </div>
65 </div>
66 <div>
67 <i>is actually </i>
68 </div>
69 <div class="group-row">
70 <div id="realHeight" style="color: white"></div>
71 <button id="copyButton">📋</button>
72 </div>
73 </div>
74 <div class="responsiveGrid">
75 <div class="flex col">
76 <canvas id="diagram"></canvas>
77 <input id="testStringInput" type="text" placeholder="Apd" />
78 </div>
79
80 <div id="previewText" style="font-family: 'Arial'">
81 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
82 eiusmod tempor incididunt ut labore et dolore magna aliqua. Ultrices
83 vitae auctor eu augue ut lectus. Magna sit amet purus gravida quis
84 blandit turpis. Quam quisque id diam vel quam elementum. Mi sit amet
85 mauris commodo quis imperdiet massa tincidunt. Habitant morbi
86 tristique senectus et netus. Varius morbi enim nunc faucibus a
87 pellentesque sit. Vel turpis nunc eget lorem dolor sed viverra.
88 </div>
89 </div>
90 </main>
91
92 <footer>
93 <script
94 type="text/javascript"
95 src="https://cdnjs.buymeacoffee.com/1.0.0/button.prod.min.js"
96 data-name="bmc-button"
97 data-slug="tynanpurdy"
98 data-color="#97d283"
99 data-emoji=""
100 data-font="Arial"
101 data-text="Buy me a coffee"
102 data-outline-color="#000000"
103 data-font-color="#000000"
104 data-coffee-color="#ffffff"
105 ></script>
106 </footer>
107 <script src="index.js"></script>
108 </body>
109</html>