-
Notifications
You must be signed in to change notification settings - Fork 6
/
index.html
102 lines (87 loc) · 2.78 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
@font-face {
font-family: test;
src: url("bitmap_fonts/ascii_8x8.woff") format("opentype");
}
pre {
font-family: test;
line-height: 100%;
}
</style>
</head>
<body>
<h1>PNG Font to TTF converter</h1>
<p>
This tool converts a bitmap font where black pixels are background to a ttf font.
</p>
<p>
Requirements: python3, Pillow, fontforge
</p>
<p>
Usage: <code>python png_font_to_ttf.py output.woff input.png char-width char-height</code>
</p>
Source code: <a href="https://github.com/benob/png_font_to_ttf">https://github.com/benob/png_font_to_ttf</a>
<p>
Demo: to access non-alphanumeric characters, use entities in the range 0xe000-0xe0ff.
<p><textarea rows="10" onkeyup="document.getElementById('target').innerHTML = value">Hello roguelikers
01236!!#
######
#$...#
#..@.#
#]..~#
#+####
&#xe0af;&#xe09f;&#xe001;</textarea><pre id="target">Hello roguelikers
01236!!#
######
#$...#
#..@.#
#]..~#
#+####
</pre></p>
<h2>Example fonts</h2>
(font examples from <a href="https://www.gridsagegames.com/rexpaint/resources.html#Fonts">Rexpaint font page</a>)
</p>
<script>
function add_font_class(name, url) {
var newStyle = document.createElement('style');
newStyle.appendChild(document.createTextNode("\
@font-face {\
font-family: " + name + ";\
src: url('" + url + "') format('opentype');\
}\
." + name + " {\
font-family: " + name + ";\
}\
"));
document.head.appendChild(newStyle);
}
function char_matrix() {
var output = "";
for(var i = 0; i < 256; i++) {
if(i != 0 && i % 16 == 0) output += "\n";
output += "à" + ('000' + i.toString(16)).substr(-2) + ";";
}
return output;
}
var fonts = "bitmap_fonts/aquarius_8x8.woff bitmap_fonts/cp437-thin_8x16.woff bitmap_fonts/max_brazilian_8x8.woff bitmap_fonts/unscii_8x16.woff bitmap_fonts/ascii_8x8.woff bitmap_fonts/cp437-thin_8x8.woff bitmap_fonts/zx_evolution_8x8.woff bitmap_fonts/cp437_8x14.woff bitmap_fonts/drake_10x10.woff bitmap_fonts/polyducks_12x12.woff bitmap_fonts/cp437_8x16.woff bitmap_fonts/gumix_cp437_6x6.woff bitmap_fonts/polyducks_gloop_8x8.woff bitmap_fonts/cp437_9x16.woff bitmap_fonts/hitachi_MB-6880_8x8.woff bitmap_fonts/qbicfeet_10x10.woff".split(/ */);
for(var i = 0; i < fonts.length; i++) {
add_font_class('f' + i, fonts[i]);
var p = document.createElement("p");
document.body.appendChild(p);
var pre = document.createElement("pre");
pre.className = "f" + i;
pre.innerHTML = char_matrix();
var link = document.createElement("a");
link.href = "https://github.com/benob/png_font_to_ttf/raw/master/" + fonts[i];
link.innerText = fonts[i];
p.appendChild(link);
p.appendChild(pre);
}
console.log(char_matrix());
</script>
</body>
</html>