-
Notifications
You must be signed in to change notification settings - Fork 8
/
Copy pathindex.html
254 lines (240 loc) · 13.7 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
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
<!--[if IE ]><![endif]-->
<!DOCTYPE html>
<!--[if IE 8 ]> <html class="no-js lt-ie9 ie8" lang="en"> <![endif]-->
<!--[if IE 9 ]> <html class="no-js lt-ie10 ie9" lang="en"> <![endif]-->
<!--[if (gte IE 10)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, user-scalable=no">
<title>webfont|test - Test and analyze your favorite web fonts</title>
<meta name="title" content="webfont|test - Test and analyze your favorite web fonts">
<meta name="description" content="Test and analyze fonts for the web: Google fonts, system fonts and custom fonts.">
<meta name="keywords" content="webfont, font, test, analyze, thypography, google">
<meta name="author" content="Lorenzo Zottar">
<meta name="copyright" content="Lorenzo Zottar">
<meta http-equiv="Reply-to" content="[email protected]">
<meta http-equiv="content-language" content="EN">
<meta http-equiv="Content-Type" content="text/html; iso-8859-1">
<meta name="robots" content="INDEX,FOLLOW">
<meta name="creation_Date" content="08/22/2014">
<meta name="revisit-after" content="7 days">
<link rel="canonical" href="http://webfont-test.com/" />
<meta name="cc:prop" content="06c86708-24f9-4cdb-99e0-c3ca4bbb3426">
<link rel="author" href="https://plus.google.com/+LorenzoZottar/posts">
<link rel="publisher" href="https://plus.google.com/+LorenzoZottar"/>
<meta property="og:title" content="webfont|test" />
<meta property="og:type" content="website" />
<meta property="og:image" content="http://webfont-test.com/img/screen.png" />
<meta property="og:description" content="Test and analyze fonts for the web: Google fonts, system fonts and custom fonts." />
<link rel="shortcut icon" href="img/icons/favicon.ico">
<link rel="apple-touch-icon" sizes="57x57" href="img/icons/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="img/icons/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="img/icons/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="img/icons/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="img/icons/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="img/icons/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="img/icons/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="img/icons/apple-touch-icon-152x152.png">
<meta name="apple-mobile-web-app-title" content="webfont|test">
<link rel="icon" type="image/png" href="img/icons/favicon-196x196.png" sizes="196x196">
<link rel="icon" type="image/png" href="img/icons/favicon-160x160.png" sizes="160x160">
<link rel="icon" type="image/png" href="img/icons/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="img/icons/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="img/icons/favicon-32x32.png" sizes="32x32">
<meta name="msapplication-TileColor" content="#ff0000">
<meta name="msapplication-TileImage" content="img/icons/mstile-144x144.png">
<meta name="msapplication-config" content="img/icons/browserconfig.xml">
<meta name="application-name" content="webfont|test">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,300italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/style.css">
<style type="text/css" media="print">
</style>
<style id="custom"> </style>
</head>
<body class="none">
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-10328442-4', 'auto');
ga('set', 'anonymizeIp', true);
ga('send', 'pageview');
</script>
<div class="header" itemtype="http://data-vocabulary.org/Product">
<img src="img/logo.png" alt="" class="logo">
<h1 class="brand" itemprop="name">webfont<strong>|test</strong></h1>
<div class="share">
<span>Share on:</span>
<a class="fa fa-facebook-square" href="https://www.facebook.com/sharer/sharer.php?u=http://webfont-test.com" target="_blank"></a>
<a class="fa fa-twitter-square" href="https://twitter.com/intent/tweet?text=%23webfont%20%7C%20test%20-%20Test%20and%20analyze%20Google%2C%20system%20and%20custom%20%23font%20for%20%23webdesign%20%40%20http%3A%2F%2Fwebfont-test.com%2F&source=webclient" target="_blank"></a>
<a class="fa fa-google-plus-square" href="https://plus.google.com/share?url=http://webfont-test.com" target="_blank"></a>
<a class="fa fa-pinterest-square" href="https://pinterest.com/pin/create/button/?url=http://webfont-test.com&media=http://webfont-test.com/img/screen.png&description=Test%20and%20analyze%20Google,%20system%20and%20custom%20font%20for%20webdesign." target="_blank"></a>
<a class="fa fa-linkedin-square" href="https://www.linkedin.com/shareArticle?mini=true&url=http://webfont-test.com&title=webfont%7Ctest&summary=Test%20and%20analyze%20Google,%20system%20and%20custom%20font%20for%20webdesign.&source=" target="_blank"></a>
</div>
</div>
<div class="intro">
<div class="no-js-notice"><strong>:(</strong> No Javascript, no party!</div>
<div class="overlay"></div>
<div class="wrapper">
<h1 class="title">Test up to three <strong>fonts</strong></h1>
<p>You can choose a <strong>Google Font</strong> or a <strong>Websafe font</strong> from the list, write the exact name of a <strong>System Font</strong> or <strong>Upload</strong> a custom font file.</p>
<div class="inputBar">
<img src="img/load.GIF" id="spinner" alt="Loading...">
<input type="hidden" id="font-select">
<button class="bigButton fa fa-plus" id="uploadButton"></button>
<input type="file" id="upload" accept='.ttf,.otf,.eot,.woff'>
</div>
</div>
<div class="attribution">
"<a href="http://commons.wikimedia.org/wiki/File:Wood_letterpress_blocks.jpg#mediaviewer/File:Wood_letterpress_blocks.jpg" target="_blank">Wood letterpress blocks</a>" by <a href="//www.flickr.com/people/33423611@N00" class="extiw" title="flickruser:33423611@N00" target="_blank">Michele M. F.</a> - <a href="//commons.wikimedia.org/wiki/Flickr" title="Flickr" class="mw-redirect" target="_blank">Flickr</a>: <a rel="nofollow" class="external" href="http://flickr.com/photos/33423611@N00/11058216303" target="_blank">4K Retina resolution wallpaper 16:10 - Wood letterpress</a>.<br>Licensed under <a href="http://creativecommons.org/licenses/by-sa/2.0" title="Creative Commons Attribution-Share Alike 2.0" target="_blank">CC BY-SA 2.0</a> via <a href="//commons.wikimedia.org/wiki/" target="_blank">Wikimedia Commons</a>.
</div>
</div>
<div class="howto">
<div class="wrapper">
<div class="title">What <strong class="stronger">Webfont</strong>|test</strong> is</div>
<p>It's a tool to <strong>test and analyze webfonts</strong> that you intend to use in your websites or projects.</p>
<p> You can compare fonts from different sources (Google Fonts, System Fonts or any font file downloaded from internet), analyze their x-height, weights, characteristics and peculiarities, and display their legibility at different sizes.</p>
<div class="title">What it's not</div>
<p>Its' not a tool to discover new fonts: web has plenty of these tools and another one is not necessary. Use <a href="https://www.google.com/fonts" target="_blank">Google Font</a>, <a href="http://www.fontsquirrel.com/" target="_blank">Font Squirrel</a> or simply <a href="https://www.google.it/#q=best+free+web+fonts&tbs=qdr:y" target="_blank">search on Google</a>. <br></p>
<div class="title">How to use it</div>
<ol>
<li>
<div class="number">1</div>
Find out some fonts you like.
</li>
<li>
<div class="number">2</div>
Choose a <strong>Google Font</strong> from the list above or <strong>use the <span class="fa fa-plus-square"></span> button to upload</strong> a custom font. You can also test a system font simply by typing its name in the input box.
</li>
<li>
<div class="number">3</div>
Drag the font to align it to the baseline and drag the lines to compare font's heights.
</li>
<li>
<div class="number">4</div>
Click on the little pencil in the top right border to modify the text at your will.
</li>
</ol>
<div class="title">Using Google <strong>Chrome</strong>?</div>
<p>Install <a href="https://chrome.google.com/webstore/detail/webfonttest/ladodfifhhcaabnbbcfnaejkjincffke"><strong>webfont|test app for chrome</strong></a> for a quick access!</p>
</div>
</div>
<div class="playground">
<div class="options section">
<div class="wrapper">
<span class="option selected" data-target=".baseline">baseline</span>
<span class="option" data-target=".xheight">x-height</span>
<span class="option" data-target=".capheight">cap height</span>
<span class="option" data-target=".ascender">ascender height</span>
<span class="option" data-target=".descender">descender height</span>
</div>
</div>
<div class="magnifier">
<div class="edit_toggle"><span class="fa fa-pencil"></span></div>
<table class="tableWrapper">
<tr>
<td class="font col1">
<span class="editable is_draggable" contenteditable="false" spellcheck="false" data-object="0" data-maxChars="5">Type</span>
</td>
<td class="font col2">
<span class="editable is_draggable" contenteditable="false" spellcheck="false" data-object="1" data-maxChars="5">Type</span>
</td>
<td class="font col3">
<span class="editable is_draggable" contenteditable="false" spellcheck="false" data-object="2" data-maxChars="5">Type</span>
</td>
</tr>
</table>
<div class="line baseline"></div>
<div class="movable line xheight"></div>
<div class="movable line capheight"></div>
<div class="movable line ascender"></div>
<div class="movable line descender"></div>
</div>
<div class="fontName section">
<table class="tableWrapper">
<tr>
<td class="col1">(<span class="name"></span><div class="weight" data-object="0" id=""></div>)</td>
<td class="col2">(<span class="name"></span><div class="weight" data-object="1" id=""></div>)</td>
<td class="col3">(<span class="name"></span><div class="weight" data-object="2" id=""></div>)</td>
</tr>
</table>
</div>
<div class="sizes">
<div class="headline section">
<table class="tableWrapper">
<tr>
<td class="col1"><span class="editable" contenteditable="false" spellcheck="false"></span></td>
<td class="col2"><span class="editable" contenteditable="false" spellcheck="false"></span></td>
<td class="col3"><span class="editable" contenteditable="false" spellcheck="false"></span></td>
</tr>
</table>
</div>
<div class="subhead section">
<table class="tableWrapper">
<tr>
<td class="col1"><span class="editable" contenteditable="false" spellcheck="false"></span></td>
<td class="col2"><span class="editable" contenteditable="false" spellcheck="false"></span></td>
<td class="col3"><span class="editable" contenteditable="false" spellcheck="false"></span></td>
</tr>
</table>
</div>
<div class="text section">
<table class="tableWrapper">
<tr>
<td class="col1">
<span class="editable" contenteditable="false" spellcheck="false">
</span>
</td>
<td class="col2">
<span class="editable" contenteditable="false" spellcheck="false">
</span>
</td>
<td class="col3">
<span class="editable" contenteditable="false" spellcheck="false">
</span>
</td>
</tr>
</table>
</div>
<div class="caption section">
<table class="tableWrapper">
<tr>
<td class="col1">
<span class="editable" contenteditable="false" spellcheck="false">
</span>
</td>
<td class="col2">
<span class="editable" contenteditable="false" spellcheck="false">
</span>
</td>
<td class="col3">
<span class="editable" contenteditable="false" spellcheck="false">
</span>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="footer" itemscope itemtype="http://data-vocabulary.org/Person">
<div class="wrapper">
Copyright © 2014<script>document.write(' - ' + new Date().getFullYear())</script> <a href="mailto:[email protected]" itemprop="name">Lorenzo Zottar</a> (<span itemprop="nickname">LordGiotto</span>)
<div class="social">
Follow me: <a href="https://plus.google.com/+LorenzoZottar" target="_blank">Google Plus</a> | <a href="https://www.behance.net/lordgiotto" target="_blank">Behance</a> | <a href="http://www.pinterest.com/lordgiotto/" target="_blank">Pinterest</a> | <a href="https://www.linkedin.com/in/lorenzozottar" target="_blank">Linkedin</a>
</div>
<div class="github"><a href="https://github.com/lordgiotto/webfont-test" target="_blank"> <span class="fa fa-github-square"></span> Fork me on github</a> <a href="https://github.com/lordgiotto/webfont-test/issues" target="_blank"><span class="fa fa-bug"></span> Report a bug</a></div>
</div>
</div>
<div class="clear" id="alertBar"></div>
<div id="fontTest"></div>
<script src="js/vendor/jquery.min.js"></script>
<script src="js/vendor/jquery-ui.min.js"></script>
<script src="js/vendor/webfont.js"></script>
<script src="js/vendor/modernizr.js"></script>
<script src="js/plugins.min.js"></script>
<script src="js/main.min.js"></script>
<script type="text/javascript" src="https://nibirumail.com/docs/scripts/nibirumail.cookie.min.js"></script>
</body>
</html>