MVT/fonts.html at main · ajayan508/MVT · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Font Check</title>
		<style>
			body {
				font-family: 'Vera', sans-serif;
				background-color: white;
			}
			table {
				width: 100%;
				border-collapse: collapse;
				margin-top: 20px;
			}
			table, th, td {
				border: 1px solid black;
			}
			th, td {
				padding: 8px;
				text-align: left;
			}
			th {
				background-color: purple;
				color: black;
				width: 200px;
			}
			td {
				width: 300px; /* Set the width of the table data cells */
			}
			.supported {
				background-color: green;
				color: white;
			}
			.not-supported {
				background-color: red;
				color: white;
			}
		</style>
		<script>
			// This function will be triggered directly when the page loads
			function checkFonts() {
				// Define a list of fonts to check
				const fonts = [
					'Bitstream Vera Sans',
					'Bitstream Vera Sans Mono',
					'Bitstream Vera Serif',
					'InterstatePro ExtraLight',
					'InterstatePro Light',
					'Interstatepro Bold',
					'Interstatepro Regular',
					'Liberation Mono',
					'Liberation Serif',
					'Liberation Sans',
					'Mayberry Pro',
					'LG\-Handwritten',
					'LG\-Horizon\-4\-OneMW\-Icons',
					'LG\-Horizon\-4\-OneMW\-Mono',
					'Teletext\-43'
				];

				const fontNameMap = {
					'Bitstream Vera Sans': 'Bitstream Vera Sans  (Bold, Bold Oblique, Roman, Oblique)',
					'Bitstream Vera Sans Mono': 'Bitstream Vera Sans Mono  (Bold, Bold Oblique, Oblique, Roman)',
					'Bitstream Vera Serif': 'Bitstream Vera Serif  (Bold, Roman)',
					'InterstatePro ExtraLight': 'InterstatePro ExtraLight  (ExtraLight, Regular)',
					'InterstatePro Light': 'InterstatePro Light  (Light, Regular)',
					'Interstatepro Bold': 'Interstatepro Bold  (Bold, Regular)',
					'Interstatepro Regular': 'Interstatepro Regular  (Regular)',
					'Liberation Mono': 'Liberation Mono  (Bold, Bold Italic, Italic, Regular)',
					'Liberation Serif': 'Liberation Serif  (Bold, Bold Italic, Italic, Regular)',
					'Liberation Sans': 'Liberation Sans  (Bold, Bold Italic, Italic, Regular)',
					'Mayberry Pro': 'Mayberry Pro  (Regular)',
					'LG\-Handwritten': 'LG Handwritten  (Regular)',
					'LG\-Horizon\-4\-OneMW\-Icons': 'LG Horizon 4 OneMW Icons  (Regular)',
					'LG\-Horizon\-4\-OneMW\-Mono': 'LG Horizon 4 OneMW Mono  (Regular)',
					'Teletext\-43': 'Teletext 43  (Regular)',
				};

				const results = [];

				// Check each font
				fonts.forEach(font => {
					const fontName = fontNameMap[font] || font;
					if (isFontAvailable(font)) {
						results.push({ font: fontName, status: 'SUPPORTED', class: 'supported' });
					} else {
						results.push({ font: fontName, status: 'NOT SUPPORTED', class: 'not-supported' });
					}
				});

				// Display results in a table
				const tableBody = document.getElementById('font-table-body');
				tableBody.innerHTML = ''; // Clear previous results

				results.forEach(result => {
					const row = document.createElement('tr');

					const fontCell = document.createElement('td');
					fontCell.textContent = result.font;
					row.appendChild(fontCell);

					const statusCell = document.createElement('td');
					statusCell.textContent = result.status;
					statusCell.classList.add(result.class); // Add class to change color
					row.appendChild(statusCell);

					tableBody.appendChild(row);
				});
			}

			// Function to check if a font is available in the browser
			function isFontAvailable(font) {
				const testElement = document.createElement('span');
				testElement.innerText = 'abcdefghijklmnopqrstuvwxyz';
				testElement.style.fontFamily = font;
				testElement.style.position = 'absolute';
				testElement.style.visibility = 'hidden';
				document.body.appendChild(testElement);

				// Get the computed font-family of the test element
				const computedFont = window.getComputedStyle(testElement).fontFamily;

				document.body.removeChild(testElement);

				// Check if the computed font matches the requested font exactly
				return computedFont.includes(font);
			}

			// Automatically call checkFonts when the page loads
			window.onload = checkFonts;
		</script>
	</head>
	<body>
		<h1>Supported System Fonts</h1>

		<table>
			<thead>
				<tr>
					<th>System fonts and their styles</th>
					<th>Status</th>
				</tr>
			</thead>
			<tbody id="font-table-body">
				<!-- Font check results will be inserted here -->
			</tbody>
		</table>
	</body>
</html>