31 changed files with 456 additions and 1 deletions
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,337 @@
|
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1"> |
||||
<meta name="robots" content="noindex, noarchive"> |
||||
<meta name="format-detection" content="telephone=no"> |
||||
<title>Transfonter demo</title> |
||||
<link href="stylesheet.css" rel="stylesheet"> |
||||
<style> |
||||
/* |
||||
http://meyerweb.com/eric/tools/css/reset/ |
||||
v2.0 | 20110126 |
||||
License: none (public domain) |
||||
*/ |
||||
html, body, div, span, applet, object, iframe, |
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre, |
||||
a, abbr, acronym, address, big, cite, code, |
||||
del, dfn, em, img, ins, kbd, q, s, samp, |
||||
small, strike, strong, sub, sup, tt, var, |
||||
b, u, i, center, |
||||
dl, dt, dd, ol, ul, li, |
||||
fieldset, form, label, legend, |
||||
table, caption, tbody, tfoot, thead, tr, th, td, |
||||
article, aside, canvas, details, embed, |
||||
figure, figcaption, footer, header, hgroup, |
||||
menu, nav, output, ruby, section, summary, |
||||
time, mark, audio, video { |
||||
margin: 0; |
||||
padding: 0; |
||||
border: 0; |
||||
font-size: 100%; |
||||
font: inherit; |
||||
vertical-align: baseline; |
||||
} |
||||
/* HTML5 display-role reset for older browsers */ |
||||
article, aside, details, figcaption, figure, |
||||
footer, header, hgroup, menu, nav, section { |
||||
display: block; |
||||
} |
||||
body { |
||||
line-height: 1; |
||||
} |
||||
ol, ul { |
||||
list-style: none; |
||||
} |
||||
blockquote, q { |
||||
quotes: none; |
||||
} |
||||
blockquote:before, blockquote:after, |
||||
q:before, q:after { |
||||
content: ''; |
||||
content: none; |
||||
} |
||||
table { |
||||
border-collapse: collapse; |
||||
border-spacing: 0; |
||||
} |
||||
/* demo styles */ |
||||
body { |
||||
background: #f0f0f0; |
||||
color: #000; |
||||
} |
||||
.page { |
||||
background: #fff; |
||||
width: 920px; |
||||
margin: 0 auto; |
||||
padding: 20px 20px 0 20px; |
||||
overflow: hidden; |
||||
} |
||||
.font-container { |
||||
overflow-x: auto; |
||||
overflow-y: hidden; |
||||
margin-bottom: 40px; |
||||
line-height: 1.3; |
||||
white-space: nowrap; |
||||
padding-bottom: 5px; |
||||
} |
||||
h1 { |
||||
position: relative; |
||||
background: #444; |
||||
font-size: 32px; |
||||
color: #fff; |
||||
padding: 10px 20px; |
||||
margin: 0 -20px 12px -20px; |
||||
} |
||||
.letters { |
||||
font-size: 25px; |
||||
margin-bottom: 20px; |
||||
} |
||||
.s10:before { |
||||
content: '10px'; |
||||
} |
||||
.s11:before { |
||||
content: '11px'; |
||||
} |
||||
.s12:before { |
||||
content: '12px'; |
||||
} |
||||
.s14:before { |
||||
content: '14px'; |
||||
} |
||||
.s18:before { |
||||
content: '18px'; |
||||
} |
||||
.s24:before { |
||||
content: '24px'; |
||||
} |
||||
.s30:before { |
||||
content: '30px'; |
||||
} |
||||
.s36:before { |
||||
content: '36px'; |
||||
} |
||||
.s48:before { |
||||
content: '48px'; |
||||
} |
||||
.s60:before { |
||||
content: '60px'; |
||||
} |
||||
.s72:before { |
||||
content: '72px'; |
||||
} |
||||
.s10:before, .s11:before, .s12:before, .s14:before, |
||||
.s18:before, .s24:before, .s30:before, .s36:before, |
||||
.s48:before, .s60:before, .s72:before { |
||||
font-family: Arial, sans-serif; |
||||
font-size: 10px; |
||||
font-weight: normal; |
||||
font-style: normal; |
||||
color: #999; |
||||
padding-right: 6px; |
||||
} |
||||
pre { |
||||
display: block; |
||||
padding: 9px; |
||||
margin: 0 0 12px; |
||||
font-family: Monaco, Menlo, Consolas, "Courier New", monospace; |
||||
font-size: 13px; |
||||
line-height: 1.428571429; |
||||
color: #333; |
||||
font-weight: normal; |
||||
font-style: normal; |
||||
background-color: #f5f5f5; |
||||
border: 1px solid #ccc; |
||||
overflow-x: auto; |
||||
border-radius: 4px; |
||||
} |
||||
/* responsive */ |
||||
@media (max-width: 959px) { |
||||
.page { |
||||
width: auto; |
||||
margin: 0; |
||||
} |
||||
} |
||||
</style> |
||||
</head> |
||||
<body> |
||||
<div class="page"> |
||||
<div class="demo"> |
||||
<h1 style="font-family: 'Libre Bodoni'; font-weight: bold; font-style: normal;">Libre Bodoni Bold</h1> |
||||
<pre title="Usage">.your-style { |
||||
font-family: 'Libre Bodoni'; |
||||
font-weight: bold; |
||||
font-style: normal; |
||||
}</pre> |
||||
<pre title="Preload (optional)"> |
||||
<link rel="preload" href="fonts/LibreBodoni-Bold.woff2" as="font" type="font/woff2" crossorigin></pre> |
||||
<div class="font-container" style="font-family: 'Libre Bodoni'; font-weight: bold; font-style: normal;"> |
||||
<p class="letters"> |
||||
abcdefghijklmnopqrstuvwxyz<br> |
||||
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br> |
||||
0123456789.:,;()*!?'@#<>$%&^+-=~ |
||||
</p> |
||||
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="demo"> |
||||
<h1 style="font-family: 'Libre Bodoni'; font-weight: normal; font-style: italic;">Libre Bodoni Italic</h1> |
||||
<pre title="Usage">.your-style { |
||||
font-family: 'Libre Bodoni'; |
||||
font-weight: normal; |
||||
font-style: italic; |
||||
}</pre> |
||||
<pre title="Preload (optional)"> |
||||
<link rel="preload" href="fonts/LibreBodoni-Italic.woff2" as="font" type="font/woff2" crossorigin></pre> |
||||
<div class="font-container" style="font-family: 'Libre Bodoni'; font-weight: normal; font-style: italic;"> |
||||
<p class="letters"> |
||||
abcdefghijklmnopqrstuvwxyz<br> |
||||
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br> |
||||
0123456789.:,;()*!?'@#<>$%&^+-=~ |
||||
</p> |
||||
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="demo"> |
||||
<h1 style="font-family: 'Libre Bodoni'; font-weight: normal; font-style: normal;">Libre Bodoni Regular</h1> |
||||
<pre title="Usage">.your-style { |
||||
font-family: 'Libre Bodoni'; |
||||
font-weight: normal; |
||||
font-style: normal; |
||||
}</pre> |
||||
<pre title="Preload (optional)"> |
||||
<link rel="preload" href="fonts/LibreBodoni-Regular.woff2" as="font" type="font/woff2" crossorigin></pre> |
||||
<div class="font-container" style="font-family: 'Libre Bodoni'; font-weight: normal; font-style: normal;"> |
||||
<p class="letters"> |
||||
abcdefghijklmnopqrstuvwxyz<br> |
||||
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br> |
||||
0123456789.:,;()*!?'@#<>$%&^+-=~ |
||||
</p> |
||||
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="demo"> |
||||
<h1 style="font-family: 'Source Sans 3'; font-weight: bold; font-style: normal;">Source Sans 3 Bold</h1> |
||||
<pre title="Usage">.your-style { |
||||
font-family: 'Source Sans 3'; |
||||
font-weight: bold; |
||||
font-style: normal; |
||||
}</pre> |
||||
<pre title="Preload (optional)"> |
||||
<link rel="preload" href="fonts/SourceSans3-Bold.woff2" as="font" type="font/woff2" crossorigin></pre> |
||||
<div class="font-container" style="font-family: 'Source Sans 3'; font-weight: bold; font-style: normal;"> |
||||
<p class="letters"> |
||||
abcdefghijklmnopqrstuvwxyz<br> |
||||
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br> |
||||
0123456789.:,;()*!?'@#<>$%&^+-=~ |
||||
</p> |
||||
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="demo"> |
||||
<h1 style="font-family: 'Source Sans 3'; font-weight: normal; font-style: normal;">Source Sans 3 Regular</h1> |
||||
<pre title="Usage">.your-style { |
||||
font-family: 'Source Sans 3'; |
||||
font-weight: normal; |
||||
font-style: normal; |
||||
}</pre> |
||||
<pre title="Preload (optional)"> |
||||
<link rel="preload" href="fonts/SourceSans3-Regular.woff2" as="font" type="font/woff2" crossorigin></pre> |
||||
<div class="font-container" style="font-family: 'Source Sans 3'; font-weight: normal; font-style: normal;"> |
||||
<p class="letters"> |
||||
abcdefghijklmnopqrstuvwxyz<br> |
||||
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br> |
||||
0123456789.:,;()*!?'@#<>$%&^+-=~ |
||||
</p> |
||||
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="demo"> |
||||
<h1 style="font-family: 'Source Sans 3'; font-weight: normal; font-style: italic;">Source Sans 3 Italic</h1> |
||||
<pre title="Usage">.your-style { |
||||
font-family: 'Source Sans 3'; |
||||
font-weight: normal; |
||||
font-style: italic; |
||||
}</pre> |
||||
<pre title="Preload (optional)"> |
||||
<link rel="preload" href="fonts/SourceSans3-Italic.woff2" as="font" type="font/woff2" crossorigin></pre> |
||||
<div class="font-container" style="font-family: 'Source Sans 3'; font-weight: normal; font-style: italic;"> |
||||
<p class="letters"> |
||||
abcdefghijklmnopqrstuvwxyz<br> |
||||
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br> |
||||
0123456789.:,;()*!?'@#<>$%&^+-=~ |
||||
</p> |
||||
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p> |
||||
</div> |
||||
</div> |
||||
|
||||
</div> |
||||
</body> |
||||
</html> |
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,54 @@
|
||||
@font-face { |
||||
font-family: 'Libre Bodoni'; |
||||
src: url('fonts/LibreBodoni-Bold.woff2') format('woff2'), |
||||
url('fonts/LibreBodoni-Bold.woff') format('woff'); |
||||
font-weight: bold; |
||||
font-style: normal; |
||||
font-display: swap; |
||||
} |
||||
|
||||
@font-face { |
||||
font-family: 'Libre Bodoni'; |
||||
src: url('fonts/LibreBodoni-Italic.woff2') format('woff2'), |
||||
url('fonts/LibreBodoni-Italic.woff') format('woff'); |
||||
font-weight: normal; |
||||
font-style: italic; |
||||
font-display: swap; |
||||
} |
||||
|
||||
@font-face { |
||||
font-family: 'Libre Bodoni'; |
||||
src: url('fonts/LibreBodoni-Regular.woff2') format('woff2'), |
||||
url('fonts/LibreBodoni-Regular.woff') format('woff'); |
||||
font-weight: normal; |
||||
font-style: normal; |
||||
font-display: swap; |
||||
} |
||||
|
||||
@font-face { |
||||
font-family: 'Source Sans 3'; |
||||
src: url('fonts/SourceSans3-Bold.woff2') format('woff2'), |
||||
url('fonts/SourceSans3-Bold.woff') format('woff'); |
||||
font-weight: bold; |
||||
font-style: normal; |
||||
font-display: swap; |
||||
} |
||||
|
||||
@font-face { |
||||
font-family: 'Source Sans 3'; |
||||
src: url('fonts/SourceSans3-Regular.woff2') format('woff2'), |
||||
url('fonts/SourceSans3-Regular.woff') format('woff'); |
||||
font-weight: normal; |
||||
font-style: normal; |
||||
font-display: swap; |
||||
} |
||||
|
||||
@font-face { |
||||
font-family: 'Source Sans 3'; |
||||
src: url('fonts/SourceSans3-Italic.woff2') format('woff2'), |
||||
url('fonts/SourceSans3-Italic.woff') format('woff'); |
||||
font-weight: normal; |
||||
font-style: italic; |
||||
font-display: swap; |
||||
} |
||||
|
||||
Binary file not shown.
Loading…
Reference in new issue