-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathfonttest.html
More file actions
189 lines (183 loc) · 9.27 KB
/
Copy pathfonttest.html
File metadata and controls
189 lines (183 loc) · 9.27 KB
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
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Font Display Test</title>
<link
rel="stylesheet"
as="style"
crossorigin
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css"
/>
<style>
@font-face {
font-family: "Last Resort";
src:
local("Last Resort"),
url("LastResortHE-Regular.ttf") format("ttf"),
url("LastResort-Regular.ttf") format("ttf");
}
body {
font-family: Pretendard, sans-serif;
margin: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
input {
width: 100%;
font-size: 32px;
}
.uniInput {
width: 15%;
}
.input-container {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.font-display {
width: 100%;
max-width: 100%;
margin-bottom: 20px;
border: 1px solid #ccc;
font-size: 32px;
padding: 10px;
}
button {
padding: 10px 15px;
font-size: 16px;
margin-left: 5px; /* Space between input and button */
}
</style>
</head>
<body>
<div class="input-container">
<input type="text" id="textInput" placeholder="Type something..." style="font-family:'ScriptwideSansCJK-A','ScriptwideSansCJK-B','ScriptwideSansCJK-C'"/>
<div class="uniInput">
<input type="text" id="unicodeInput" placeholder="4e00" style="font-family:monospace;" />
</div>
<button id="addCharButton" style="font-family:Inter;">Add Character</button>
</div>
<div class="font-display" style="font-family: 'Source Han Sans KR', 'Noto Sans KR', 'Noto Sans CJK KR', 'Last Resort';">
[K] SHS KR | <span id="fontSK"></span>
</div>
<div class="font-display" style="font-family: 'Source Han Sans JP', 'Noto Sans JP', 'Noto Sans CJK JP', 'Last Resort';">
[J] SHS JP | <span id="fontSJ"></span>
</div>
<div class="font-display" style="font-family: 'Source Han Sans HK', 'Noto Sans HK', 'Noto Sans CJK HK', 'Last Resort';">
[H] SHS HK | <span id="fontSH"></span>
</div>
<div class="font-display" style="font-family: 'Source Han Sans TW', 'Noto Sans TC', 'Noto Sans CJK TC', 'Last Resort';">
[T] SHS TW | <span id="fontST"></span>
</div>
<div class="font-display" style="font-family: 'Source Han Sans CN', 'Noto Sans SC', 'Noto Sans CJK SC', 'Last Resort';">
[G] SHS CN | <span id="fontSC"></span>
</div>
<div class="font-display" style="font-family: 'Chocolate Classical Sans','Last Resort';">
[I] Chocolate CL | <span id="fontChoc"></span>
</div>
<div class="font-display" style="font-family: 'GenYoGothic2 TC','Last Resort';">
[I] GenYoGothic TC | <span id="fontGenYoTC"></span>
</div>
<div class="font-display" style="font-family: 'GenYoGothic2 TW','Last Resort';">
[I] GenYoGothic TW | <span id="fontGenYoTW"></span>
</div>
<div class="font-display" style="font-family: 'GenYoGothic2 JP','Last Resort';">
[J] GenYoGothic JP | <span id="fontGenYoJP"></span>
</div>
<div class="font-display" style="font-family: 'Sukima Gothic','Sukima Gothic SUB','Last Resort';">
[J] Sukima Gothic | <span id="fontSukima"></span>
</div>
<div class="font-display" style="font-family: 'Gothic Nguyen','Last Resort';">
[K] Gothic Nguyen | <span id="fontNguyen"></span>
</div>
<div class="font-display" style="font-family: 'Chiron Hei HK','Last Resort';">
[H*] Chiron Hei HK | <span id="fontChiron"></span>
</div>
<div class="font-display" style="font-family: 'WenYuan Sans SC', 'WenYuan Gothic','Last Resort';">
[G] WenYuan Sans | <span id="fontWenY"></span>
</div>
<div class="font-display" style="font-family: Yshi-YuanGothic,'Last Resort';">
[I] Yuu-Gothic | <span id="fontYshi"></span>
</div>
<div class="font-display" style="font-family: ChiuKong Gothic MN,'Last Resort';">
[I] ChiuKong Gothic | <span id="fontChiu"></span>
</div>
<div class="font-display" style="font-family: 'Shanggu Sans TC','Last Resort';">
[I] Shanggu Sans | <span id="fontShang"></span>
</div>
<div class="font-display" style="font-family: 'Genne Gothic','Last Resort';">
[I] Genne Gothic | <span id="fontGenne"></span>
</div>
<div class="font-display" style="font-family: 'Plangothic P1', 'Plangothic P2','Last Resort';">
[G] Plangothic | <span id="fontPlan"></span>
</div>
<div class="font-display" style="font-family: 'ScriptwideSansCJK-A', 'ScriptwideSansCJK-B','ScriptwideSansCJK-C','Last Resort';">
[K*|G*] Scriptwide Sans | <span id="fontScrw"></span>
</div>
<hr>
<p>This page is in the public domain. All fonts used are licensed under the OFL. See <a href="https://github.com/FishlandicFishy/cjk-utils">the GitHub repository</a>.</p>
<p><a href="https://github.com/orioncactus/pretendard">Pretendard <sup>(body font)</sup></a> | <a href="https://github.com/unicode-org/last-resort-font">Last Resort <sup>(fallback font)</sup></a> | <a href="https://github.com/adobe-fonts/source-han-sans">Source Han Sans</a> | <a href="https://github.com/MoonlitOwen/ChocolateSans">Chocolate Classical Sans</a> | <a href="https://github.com/ButTaiwan/genyog-font">GenYoGothic</a> | <a href="https://booth.pm/ja/items/2117070">Sukima Gothic</a> | <a href="https://github.com/TKYKmori/Gothic-Nguyen">Gothic Nguyen</a> | <a href="https://chiron-fonts.github.io/">Chiron Hei HK</a> | <a href="https://github.com/takushun-wu/WenYuanFonts">WenYuan Sans</a> | <a href="https://github.com/Steve-Yuu/Yuu-Gothic">Yuu-Gothic</a> | <a href="https://github.com/ChiuMing-Neko/ChiuKongGothic">ChiuKong Gothic</a> | <a href="https://github.com/GuiWonder/Shanggu">Shanggu Sans</a> | <a href="https://github.com/MoneMizuno/Genne-Gothic">Genne Gothic</a> | <a href="https://github.com/Fitzgerald-Porthmouth-Koenigsegg/Plangothic_Project">Plangothic</a> | <a href="https://github.com/scriptwide-fonts/scriptwide-sans-cjk">Scriptwide Sans</a></p>
<script>
const textInput = document.getElementById('textInput');
const unicodeInput = document.getElementById('unicodeInput');
const addCharButton = document.getElementById('addCharButton');
const fontSK = document.getElementById('fontSK');
const fontSJ = document.getElementById('fontSJ');
const fontSH = document.getElementById('fontSH');
const fontST = document.getElementById('fontST');
const fontSC = document.getElementById('fontSC');
const fontChoc = document.getElementById('fontChoc');
const fontGenYoTC = document.getElementById('fontGenYoTC');
const fontGenYoTW = document.getElementById('fontGenYoTW');
const fontGenYoJP = document.getElementById('fontGenYoJP');
const fontSukima = document.getElementById('fontSukima');
const fontNguyen = document.getElementById('fontNguyen');
const fontChiron = document.getElementById('fontChiron');
const fontWenY = document.getElementById('fontWenY');
const fontYshi = document.getElementById('fontYshi');
const fontChiu = document.getElementById('fontChiu');
const fontShang = document.getElementById('fontShang');
const fontGenne = document.getElementById('fontGenne');
const fontPlan = document.getElementById('fontPlan');
const fontScrw = document.getElementById('fontScrw');
textInput.addEventListener('input', updateFonts);
addCharButton.addEventListener('click', appendUnicodeChar);
function updateFonts() {
const inputText = textInput.value;
fontSK.textContent = inputText;
fontSJ.textContent = inputText;
fontSH.textContent = inputText;
fontST.textContent = inputText;
fontSC.textContent = inputText;
fontChoc.textContent = inputText;
fontGenYoTC.textContent = inputText;
fontGenYoTW.textContent = inputText;
fontGenYoJP.textContent = inputText;
fontSukima.textContent = inputText;
fontNguyen.textContent = inputText;
fontChiron.textContent = inputText;
fontWenY.textContent = inputText;
fontYshi.textContent = inputText;
fontChiu.textContent = inputText;
fontShang.textContent = inputText;
fontGenne.textContent = inputText;
fontPlan.textContent = inputText;
fontScrw.textContent = inputText;
}
function appendUnicodeChar() {
const hexCode = unicodeInput.value.trim();
if (hexCode.match(/^[0-9A-Fa-f]{1,6}$/)) {
const char = String.fromCodePoint(parseInt(hexCode, 16));
textInput.value += char;
updateFonts();
unicodeInput.value = ''; // Clear the input after adding
} else {
alert('Please enter a valid hexadecimal codepoint (e.g. 4e00).');
}
}
</script>
</body>
</html>