source for lucas.co
archive/fonts/old_standard/demo.html (10K)
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1">
7 <meta name="robots" content="noindex, noarchive">
8 <meta name="format-detection" content="telephone=no">
9 <title>Transfonter demo</title>
10 <link href="stylesheet.css" rel="stylesheet">
11 <style>
12 /*
13 http://meyerweb.com/eric/tools/css/reset/
14 v2.0 | 20110126
15 License: none (public domain)
16 */
17 html, body, div, span, applet, object, iframe,
18 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
19 a, abbr, acronym, address, big, cite, code,
20 del, dfn, em, img, ins, kbd, q, s, samp,
21 small, strike, strong, sub, sup, tt, var,
22 b, u, i, center,
23 dl, dt, dd, ol, ul, li,
24 fieldset, form, label, legend,
25 table, caption, tbody, tfoot, thead, tr, th, td,
26 article, aside, canvas, details, embed,
27 figure, figcaption, footer, header, hgroup,
28 menu, nav, output, ruby, section, summary,
29 time, mark, audio, video {
30 margin: 0;
31 padding: 0;
32 border: 0;
33 font-size: 100%;
34 font: inherit;
35 vertical-align: baseline;
36 }
37 /* HTML5 display-role reset for older browsers */
38 article, aside, details, figcaption, figure,
39 footer, header, hgroup, menu, nav, section {
40 display: block;
41 }
42 body {
43 line-height: 1;
44 }
45 ol, ul {
46 list-style: none;
47 }
48 blockquote, q {
49 quotes: none;
50 }
51 blockquote:before, blockquote:after,
52 q:before, q:after {
53 content: '';
54 content: none;
55 }
56 table {
57 border-collapse: collapse;
58 border-spacing: 0;
59 }
60 /* demo styles */
61 body {
62 background: #f0f0f0;
63 color: #000;
64 }
65 .page {
66 background: #fff;
67 width: 920px;
68 margin: 0 auto;
69 padding: 20px 20px 0 20px;
70 overflow: hidden;
71 }
72 .font-container {
73 overflow-x: auto;
74 overflow-y: hidden;
75 margin-bottom: 40px;
76 line-height: 1.3;
77 white-space: nowrap;
78 padding-bottom: 5px;
79 }
80 h1 {
81 position: relative;
82 background: #444;
83 font-size: 32px;
84 color: #fff;
85 padding: 10px 20px;
86 margin: 0 -20px 12px -20px;
87 }
88 .letters {
89 font-size: 25px;
90 margin-bottom: 20px;
91 }
92 .s10:before {
93 content: '10px';
94 }
95 .s11:before {
96 content: '11px';
97 }
98 .s12:before {
99 content: '12px';
100 }
101 .s14:before {
102 content: '14px';
103 }
104 .s18:before {
105 content: '18px';
106 }
107 .s24:before {
108 content: '24px';
109 }
110 .s30:before {
111 content: '30px';
112 }
113 .s36:before {
114 content: '36px';
115 }
116 .s48:before {
117 content: '48px';
118 }
119 .s60:before {
120 content: '60px';
121 }
122 .s72:before {
123 content: '72px';
124 }
125 .s10:before, .s11:before, .s12:before, .s14:before,
126 .s18:before, .s24:before, .s30:before, .s36:before,
127 .s48:before, .s60:before, .s72:before {
128 font-family: Arial, sans-serif;
129 font-size: 10px;
130 font-weight: normal;
131 font-style: normal;
132 color: #999;
133 padding-right: 6px;
134 }
135 pre {
136 display: block;
137 padding: 9px;
138 margin: 0 0 12px;
139 font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
140 font-size: 13px;
141 line-height: 1.428571429;
142 color: #333;
143 font-weight: normal;
144 font-style: normal;
145 background-color: #f5f5f5;
146 border: 1px solid #ccc;
147 overflow-x: auto;
148 border-radius: 4px;
149 }
150 /* responsive */
151 @media (max-width: 959px) {
152 .page {
153 width: auto;
154 margin: 0;
155 }
156 }
157 </style>
158 </head>
159 <body>
160 <div class="page">
161 <div class="demo">
162 <h1 style="font-family: 'Old Standard TT'; font-weight: bold; font-style: normal;">Old Standard TT Bold</h1>
163 <pre title="Usage">.your-style {
164 font-family: 'Old Standard TT';
165 font-weight: bold;
166 font-style: normal;
167 }</pre>
168 <pre title="Preload (optional)">
169 <link rel="preload" href="OldStandardTT-Bold.woff2" as="font" type="font/woff2" crossorigin></pre>
170 <div class="font-container" style="font-family: 'Old Standard TT'; font-weight: bold; font-style: normal;">
171 <p class="letters">
172 abcdefghijklmnopqrstuvwxyz<br>
173 ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
174 0123456789.:,;()*!?'@#<>$%&^+-=~
175 </p>
176 <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
177 <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
178 <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
179 <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
180 <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
181 <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
182 <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
183 <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
184 <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
185 <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
186 <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
187 </div>
188 </div>
189
190 <div class="demo">
191 <h1 style="font-family: 'Old Standard TT'; font-weight: normal; font-style: normal;">Old Standard TT Regular</h1>
192 <pre title="Usage">.your-style {
193 font-family: 'Old Standard TT';
194 font-weight: normal;
195 font-style: normal;
196 }</pre>
197 <pre title="Preload (optional)">
198 <link rel="preload" href="OldStandardTT-Regular.woff2" as="font" type="font/woff2" crossorigin></pre>
199 <div class="font-container" style="font-family: 'Old Standard TT'; font-weight: normal; font-style: normal;">
200 <p class="letters">
201 abcdefghijklmnopqrstuvwxyz<br>
202 ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
203 0123456789.:,;()*!?'@#<>$%&^+-=~
204 </p>
205 <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
206 <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
207 <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
208 <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
209 <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
210 <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
211 <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
212 <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
213 <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
214 <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
215 <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
216 </div>
217 </div>
218
219 <div class="demo">
220 <h1 style="font-family: 'Old Standard TT'; font-weight: normal; font-style: italic;">Old Standard TT Italic</h1>
221 <pre title="Usage">.your-style {
222 font-family: 'Old Standard TT';
223 font-weight: normal;
224 font-style: italic;
225 }</pre>
226 <pre title="Preload (optional)">
227 <link rel="preload" href="OldStandardTT-Italic.woff2" as="font" type="font/woff2" crossorigin></pre>
228 <div class="font-container" style="font-family: 'Old Standard TT'; font-weight: normal; font-style: italic;">
229 <p class="letters">
230 abcdefghijklmnopqrstuvwxyz<br>
231 ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
232 0123456789.:,;()*!?'@#<>$%&^+-=~
233 </p>
234 <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
235 <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
236 <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
237 <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
238 <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
239 <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
240 <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
241 <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
242 <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
243 <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
244 <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
245 </div>
246 </div>
247
248 </div>
249 </body>
250 </html>