-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.ko.html
192 lines (181 loc) · 7.97 KB
/
index.ko.html
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
190
191
192
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>INAFFont - 비공식 Ninomae Ina'nis 폰트</title>
<meta name="description" content="비공식 Ninomae Ina'nis 폰트">
<!-- Facebook Meta Tags -->
<meta property="og:url" content="https://yf-dev.github.io/inaffont/">
<meta property="og:type" content="website">
<meta property="og:title" content="INAFFont">
<meta property="og:description" content="비공식 Ninomae Ina'nis 폰트">
<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta property="twitter:domain" content="yf-dev.github.io">
<meta property="twitter:url" content="https://yf-dev.github.io/inaffont/">
<meta name="twitter:title" content="INAFFont">
<meta name="twitter:description" content="비공식 Ninomae Ina'nis 폰트">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="./assets/style.css" rel="stylesheet">
</head>
<body>
<div class="header">
<div class="container">
<div class="title">
<h1>INAFFont</h1>
<div class="subtitle">비공식 Ninomae Ina'nis 폰트</div>
<a class="button" href="https://github.com/yf-dev/inaffont/tree/main/dist" target="_blank">Download</a>
<a class="button" href="https://github.com/yf-dev/inaffont" target="_blank">Github</a>
</div>
</div>
</div>
<div class="container">
<div>
<a href="./index.html">English</a> / <a href="./index.ko.html">한국어</a>
<h2>개요</h2>
<p>
INAFFont는
<a href="https://hololive.hololivepro.com/en/talents/ninomae-inanis/" target="_blank">Ninomae
Ina'nis</a>의 아트워크에 사용하는 특징적인 글리프 담은 폰트입니다.
</p>
<p>
아트워크에 표현되지 않아 글리프를 알 수 없는 일부 글자는 다른 글리프와 비슷하게 보이도록 추정하여 만들었으므로, 실제 글리프와 다를 수 있습니다.
</p>
</div>
<div class="font-list">
<h2>사용 가능한 폰트</h2>
<ul>
<li><span class="font-name">INAFFont Meconopsis</span>: <a
href="https://www.youtube.com/watch?v=XzkNg89Cq9Y" target="_blank">MECONOPSIS MV</a>에 사용된 글리프를
바탕으로 만든 폰트입니다.</li>
</ul>
</div>
<div>
<h2>미리보기</h2>
<h3>INAFFont Meconopsis Thin</h3>
<p class="preview thin">
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
abcdefghijklmnopqrstuvwxyz<br>
1234567890(){}[]<><br>
_,.!?~@#$%&;:/|\-=*+^`'"
</p>
<h3>INAFFont Meconopsis Regular</h3>
<p class="preview regular">
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
abcdefghijklmnopqrstuvwxyz<br>
1234567890(){}[]<><br>
_,.!?~@#$%&;:/|\-=*+^`'"
</p>
<h3>INAFFont Meconopsis Bold</h3>
<p class="preview bold">
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
abcdefghijklmnopqrstuvwxyz<br>
1234567890(){}[]<><br>
_,.!?~@#$%&;:/|\-=*+^`'"
</p>
</div>
<div class="demo">
<h2>사용해보기</h2>
<fieldset>
<label for="font">Font</label>
<select name="font" id="font">
<option value="meconopsis-100">INAFFont Meconopsis Thin</option>
<option value="meconopsis-400" selected>INAFFont Meconopsis Regular</option>
<option value="meconopsis-700">INAFFont Meconopsis Bold</option>
</select>
<br>
<label for="size">Size</label>
<input type="range" name="size" id="size" min="1" max="3" value="2" step="0.1">
</fieldset>
<textarea spellcheck="false">No, I won't keep praying endlessly</textarea>
<script>
const font = document.getElementById('font');
const size = document.getElementById('size');
const textarea = document.querySelector('textarea');
font.addEventListener('change', () => {
const newValue = font.value.split('-');
if (newValue[0] === 'meconopsis') {
textarea.style.fontFamily = 'INAFFont Meconopsis';
}
textarea.style.fontWeight = newValue[1];
});
size.addEventListener('input', () => {
textarea.style.fontSize = `${size.value}rem`;
});
</script>
</div>
<div>
<h2>사용 방법</h2>
<p>
폰트 파일을 다운로드하거나 웹폰트를 사용하여 프로젝트에서 폰트를 사용할 수 있습니다.
</p>
</div>
<div>
<h3>웹폰트</h3>
<p>
다음의 CSS를 프로젝트에 포함하여 웹폰트를 사용할 수 있습니다.
</p>
<div id="webfont-code">
<pre>
@font-face {
font-family: "INAFFont Meconopsis";
font-weight: 100;
font-display: swap;
src:
url("https://cdn.jsdelivr.net/gh/yf-dev/inaffont@v0.4/dist/inaffont-meconopsis-thin.woff2") format("woff2"),
url("https://cdn.jsdelivr.net/gh/yf-dev/inaffont@v0.4/dist/inaffont-meconopsis-thin.otf") format("opentype");
}
@font-face {
font-family: "INAFFont Meconopsis";
font-weight: 400;
font-display: swap;
src:
url("https://cdn.jsdelivr.net/gh/yf-dev/inaffont@v0.4/dist/inaffont-meconopsis-regular.woff2") format("woff2"),
url("https://cdn.jsdelivr.net/gh/yf-dev/inaffont@v0.4/dist/inaffont-meconopsis-regular.otf") format("opentype");
}
@font-face {
font-family: "INAFFont Meconopsis";
font-weight: 700;
font-display: swap;
src:
url("https://cdn.jsdelivr.net/gh/yf-dev/inaffont@v0.4/dist/inaffont-meconopsis-bold.woff2") format("woff2"),
url("https://cdn.jsdelivr.net/gh/yf-dev/inaffont@v0.4/dist/inaffont-meconopsis-bold.otf") format("opentype");
}
</pre>
</div>
<script type="module">
import { codeToHtml } from 'https://esm.sh/shiki@1.6.4'
const webfontCode = document.getElementById('webfont-code');
const code = webfontCode.querySelector('pre');
webfontCode.innerHTML = await codeToHtml(code.innerHTML.trim(), {
lang: 'css',
theme: 'rose-pine-moon'
});
</script>
</div>
<div>
<h2>License</h2>
<p>
<a href="https://github.com/yf-dev/inaffont/blob/main/OFL.md" target="_blank">SIL OPEN FONT LICENSE
Version 1.1</a>
</p>
</div>
<div>
<h2>면책 조항</h2>
<p>
이 프로젝트는 Hololive Production 또는 Ninomae Ina'nis의 공식 프로젝트가 아닙니다.
</p>
<p>
각 글리프 및 아트워크에 대한 모든 권리는 해당 소유자 및 사용 허가자의 자산입니다.
</p>
<p>
폰트 소프트웨어의 라이선스와는 별개로, 글리프 및 아트워크에 대한 사용 허가는 Hololive Production의 <a href="https://hololivepro.com/en/terms/"
target="_blank">Derivative Works Guidelines</a>에 따라야 합니다.
</p>
</div>
</div>
</body>
</html>