-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
196 lines (185 loc) · 7.98 KB
/
index.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
193
194
195
196
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>INAFFont - Unofficial Font for Ninomae Ina'nis</title>
<meta name="description" content="Unofficial Font for 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="Unofficial Font for 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="Unofficial Font for 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">Unofficial Font for 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>Overview</h2>
<p>
INAFFont is a font that includes the distinctive glyphs used in
<a href="https://hololive.hololivepro.com/en/talents/ninomae-inanis/" target="_blank">Ninomae
Ina'nis</a>'s artwork.
</p>
<p>
Some characters that are not represented in the artwork are approximated to look similar to other
glyphs,
so the actual glyphs may vary.
</p>
</div>
<div class="font-list">
<h2>Available Fonts</h2>
<ul>
<li><span class="font-name">INAFFont Meconopsis</span>: A font created based on the glyphs used in <a
href="https://www.youtube.com/watch?v=XzkNg89Cq9Y" target="_blank">『MECONOPSIS』 - Ninomae
Ina'nis</a> and <a href="https://www.youtube.com/watch?v=qKwwBklpvPA" target="_blank">【FAN
MOVIE】理芽 × ヰ世界情緒 - 不的 (Ina'nis ver.)</a></li>
</ul>
</div>
<div>
<h2>Preview</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>Try it</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="2" max="4" value="3" 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>Usage</h2>
<p>
You can use the font in your projects by downloading the font files or using the webfont.
</p>
</div>
<div>
<h3>Webfont</h3>
<p>
You can use the webfont by including the following CSS in your project.
</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/[email protected]/dist/inaffont-meconopsis-thin.woff2") format("woff2"),
url("https://cdn.jsdelivr.net/gh/yf-dev/[email protected]/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/[email protected]/dist/inaffont-meconopsis-regular.woff2") format("woff2"),
url("https://cdn.jsdelivr.net/gh/yf-dev/[email protected]/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/[email protected]/dist/inaffont-meconopsis-bold.woff2") format("woff2"),
url("https://cdn.jsdelivr.net/gh/yf-dev/[email protected]/dist/inaffont-meconopsis-bold.otf") format("opentype");
}
</pre>
</div>
<script type="module">
import { codeToHtml } from 'https://esm.sh/[email protected]'
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>Disclaimer</h2>
<p>
This project is not an official project of Hololive Production or Ninomae Ina'nis.
</p>
<p>
All rights to each glyph and artwork are assets of the respective owner and licensee.
</p>
<p>
The font software license is separate from the use of glyphs and artwork, and the use of glyphs and
artwork must comply with Hololive Production's <a href="https://hololivepro.com/en/terms/"
target="_blank">Derivative Works Guidelines</a>.
</p>
</div>
</div>
</body>
</html>