forked from Codepoints/grumpy
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
132 lines (132 loc) · 6.83 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Grumpy Emoji</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<main>
<h1>Grumpy Emoji <big>☺</big></h1>
<p class="intro">
Are you, too, weary with the fuss around Emoji? Fear not: We have the
cure: <strong>Grumpy Emoji</strong>. This unique font is specifically targeted to enhance
your enjoyment on Emoji rich sites. Whether it’s the good old
<span title="☺ U+263A WHITE SMILING FACE">☺</span>,
a well-meant <span title="💕 U+1F495 TWO HEARTS">💕</span>
or a steaming <span title="💩 U+1F4A9 PILE OF POO">💩</span>,
Grumpy Emoji font is here to protect you from the epileptic seizure bound to happen.
</p>
<p class="getit">
<a class="btn" href="grumpy.zip">Download</a>
<br>
<small>ZIP file, 23kB</small>
<br>
<a href="https://github.com/Codepoints/grumpy">Fork on Github</a>
</p>
<section>
<h2>A Small Showcase</h2>
<p>Compare the magnificent emoji rendering with the <strong>Grumpy Emoji</strong>
font for example with the widely used emoji from
<a href="http://twitter.github.io/twemoji/">Twitter</a> and
<a href="https://noto.googlecode.com">Google</a>:
</p>
<table class="support-chart__table">
<thead>
<tr>
<th>Codepoint</th>
<th>Twemoji</th>
<th>Google Noto</th>
<th>Grumpy Emoji</th>
</tr>
</thead>
<tbody>
<tr>
<td>U+1F600</td>
<td><img src="http://twemoji.maxcdn.com/72x72/1f600.png" alt="Twemoji rendering" width="24"></td>
<td><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Emoji_u1f600.svg/24px-Emoji_u1f600.svg.png" alt="Noto rendering" width="24"></td>
<td><big>😀</big></td>
</tr>
<tr>
<td>U+1F363</td>
<td><img src="http://twemoji.maxcdn.com/72x72/1f363.png" alt="Twemoji rendering" width="24"></td>
<td><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/df/Emoji_u1f363.svg/24px-Emoji_u1f363.svg.png" alt="Noto rendering" width="24"></td>
<td><big>🍣</big></td>
</tr>
<tr>
<td>U+1F384</td>
<td><img src="http://twemoji.maxcdn.com/72x72/1f384.png" alt="Twemoji rendering" width="24"></td>
<td><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ee/Emoji_u1f384.svg/24px-Emoji_u1f384.svg.png" alt="Noto rendering" width="24"></td>
<td><big>🎄</big></td>
</tr>
<tr>
<td>U+1F405</td>
<td><img src="http://twemoji.maxcdn.com/72x72/1f405.png" alt="Twemoji rendering" width="24"></td>
<td><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4e/Emoji_u1f405.svg/24px-Emoji_u1f405.svg.png" alt="Noto rendering" width="24"></td>
<td><big>🐅</big></td>
</tr>
<tr>
<td>U+1F680</td>
<td><img src="http://twemoji.maxcdn.com/72x72/1f680.png" alt="Twemoji rendering" width="24"></td>
<td><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/57/Emoji_u1f680.svg/24px-Emoji_u1f680.svg.png" alt="Noto rendering" width="24"></td>
<td><big>🚀</big></td>
</tr>
<tr>
<td>U+26C5</td>
<td><img src="http://twemoji.maxcdn.com/72x72/26c5.png" alt="Twemoji rendering" width="24"></td>
<td><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Emoji_u26c5.svg/24px-Emoji_u26c5.svg.png" alt="Noto rendering" width="24"></td>
<td><big>⛅</big></td>
</tr>
</tbody>
</table>
<p>Can you see the magnificent, splendid enhancement in emoji rendering,
that this font provides?</p>
</section>
<section class="embed">
<h2>Embed Grumpy Emoji on your Site</h2>
<p>This is an easy one: Add these lines to your HTML file, and
nasty, distracting emoji, that managed to slip your attention, will
instantly be taken care of.</p>
<pre class="language-css"><code class="language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>grumpy.css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token style"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span>
<span class="token selector">body </span><span class="token punctuation">{</span> <span class="token property">font-family</span><span class="token punctuation">:</span> Grumpy, sans-serif<span class="token punctuation">;</span> <span class="token punctuation">}</span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span></span></code></pre>
</section>
<section class="support-chart">
<h2>Character Support Table</h2>
<p>The following codepoints are covered by this font:</p>
<table class="support-chart__table">
<thead>
<tr>
<th>Codepoint</th>
<th>Glyph</th>
</tr>
</thead>
<tbody>
<tr><td>U+0000</td><td>☀</td></tr>
<tr><td>U+2600</td><td>☀</td></tr>
<tr><td>⋮</td><td>⋮</td></tr>
<tr><td>U+27FF</td><td>⟿</td></tr>
<tr><td>U+1F000</td><td>🀀</td></tr>
<tr><td>⋮</td><td>⋮</td></tr>
<tr><td>U+1FFFC</td><td>🿼</td></tr>
</tbody>
</table>
</section>
<section class="fancy">
<h2>Going Wild with Grumpy Emoji</h2>
<p>Of course now that you fought emoji with success, you are free to
add a little eye candy to your site:</p>
<div class="eye-candy">☺</div>
</section>
<footer>
<p>
Created with grumpiness (and FontForge)
·
<a href="http://codepoints.net/">Codepoints</a>
·
<a href="https://twitter.com/CodepointsNet">Twitter</a>
</footer>
</main>
</body>
</html>