-
-
Save rowe-morehouse/226e1aa2b858e3d8062d7ff391d9edc5 to your computer and use it in GitHub Desktop.
GillSans
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<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; | |
} | |
/* common styles */ | |
body { | |
background: #f1f1f1; | |
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; | |
position: relative; | |
padding: 9px; | |
margin: 0 0 10px; | |
font-family: Monaco, Menlo, Consolas, "Courier New", monospace !important; | |
font-size: 13px; | |
line-height: 1.428571429; | |
color: #333; | |
font-weight: normal !important; | |
font-style: normal !important; | |
background-color: #f5f5f5; | |
border: 1px solid #ccc; | |
overflow-x: auto; | |
border-radius: 4px; | |
} | |
pre:after { | |
display: block; | |
position: absolute; | |
right: 0; | |
top: 0; | |
content: 'Usage'; | |
line-height: 1; | |
padding: 5px 8px; | |
font-size: 12px; | |
color: #767676; | |
background-color: #fff; | |
border: 1px solid #ccc; | |
border-right: none; | |
border-top: none; | |
border-radius: 0 4px 0 4px; | |
z-index: 10; | |
} | |
/* responsive */ | |
@media (max-width: 959px) { | |
.page { | |
width: auto; | |
margin: 0; | |
} | |
} | |
</style> | |
</head> | |
<body> | |
<div class="page"> | |
<div class="demo" style="font-family: 'Gill Sans Nova Cn Book'; font-weight: bold; font-style: normal;"> | |
<h1>Gill Sans Nova Cn Bold</h1> | |
<pre>.your-style { | |
font-family: 'Gill Sans Nova Cn Book'; | |
font-weight: bold; | |
font-style: normal; | |
}</pre> | |
<div class="font-container"> | |
<p class="letters"> | |
абвгдеёжзийклмнопрстуфхцчшщъыьэюя<br> | |
АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ<br> | |
abcdefghijklmnopqrstuvwxyz<br> | |
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br> | |
0123456789.:,;()*!?'@#<>$%&^+-=~ | |
</p> | |
<p class="s10" style="font-size: 10px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p> | |
<p class="s11" style="font-size: 11px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p> | |
<p class="s12" style="font-size: 12px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p> | |
<p class="s14" style="font-size: 14px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p> | |
<p class="s18" style="font-size: 18px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p> | |
<p class="s24" style="font-size: 24px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p> | |
<p class="s30" style="font-size: 30px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p> | |
<p class="s36" style="font-size: 36px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p> | |
<p class="s48" style="font-size: 48px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p> | |
<p class="s60" style="font-size: 60px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p> | |
<p class="s72" style="font-size: 72px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p> | |
</div> | |
</div> | |
<div class="demo" style="font-family: 'Gill Sans Nova'; font-weight: 900; font-style: normal;"> | |
<h1>Gill Sans Nova Heavy</h1> | |
<pre>.your-style { | |
font-family: 'Gill Sans Nova'; | |
font-weight: 900; | |
font-style: normal; | |
}</pre> | |
<div class="font-container"> | |
<p class="letters"> | |
абвгдеёжзийклмнопрстуфхцчшщъыьэюя<br> | |
АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ<br> | |
abcdefghijklmnopqrstuvwxyz<br> | |
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br> | |
0123456789.:,;()*!?'@#<>$%&^+-=~ | |
</p> | |
<p class="s10" style="font-size: 10px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p> | |
<p class="s11" style="font-size: 11px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p> | |
<p class="s12" style="font-size: 12px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p> | |
<p class="s14" style="font-size: 14px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p> | |
<p class="s18" style="font-size: 18px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p> | |
<p class="s24" style="font-size: 24px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p> | |
<p class="s30" style="font-size: 30px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p> | |
<p class="s36" style="font-size: 36px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p> | |
<p class="s48" style="font-size: 48px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p> | |
<p class="s60" style="font-size: 60px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p> | |
<p class="s72" style="font-size: 72px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p> | |
</div> | |
</div> | |
<div class="demo" style="font-family: 'Gill Sans Nova Book'; font-weight: normal; font-style: normal;"> | |
<h1>Gill Sans Nova Book</h1> | |
<pre>.your-style { | |
font-family: 'Gill Sans Nova Book'; | |
font-weight: normal; | |
font-style: normal; | |
}</pre> | |
<div class="font-container"> | |
<p class="letters"> | |
абвгдеёжзийклмнопрстуфхцчшщъыьэюя<br> | |
АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ<br> | |
abcdefghijklmnopqrstuvwxyz<br> | |
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br> | |
0123456789.:,;()*!?'@#<>$%&^+-=~ | |
</p> | |
<p class="s10" style="font-size: 10px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p> | |
<p class="s11" style="font-size: 11px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p> | |
<p class="s12" style="font-size: 12px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p> | |
<p class="s14" style="font-size: 14px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p> | |
<p class="s18" style="font-size: 18px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p> | |
<p class="s24" style="font-size: 24px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p> | |
<p class="s30" style="font-size: 30px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p> | |
<p class="s36" style="font-size: 36px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p> | |
<p class="s48" style="font-size: 48px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p> | |
<p class="s60" style="font-size: 60px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p> | |
<p class="s72" style="font-size: 72px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p> | |
</div> | |
</div> | |
<div class="demo" style="font-family: 'Gill Sans Nova Cn'; font-weight: 900; font-style: normal;"> | |
<h1>Gill Sans Nova Cn Heavy</h1> | |
<pre>.your-style { | |
font-family: 'Gill Sans Nova Cn'; | |
font-weight: 900; | |
font-style: normal; | |
}</pre> | |
<div class="font-container"> | |
<p class="letters"> | |
абвгдеёжзийклмнопрстуфхцчшщъыьэюя<br> | |
АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ<br> | |
abcdefghijklmnopqrstuvwxyz<br> | |
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br> | |
0123456789.:,;()*!?'@#<>$%&^+-=~ | |
</p> | |
<p class="s10" style="font-size: 10px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p> | |
<p class="s11" style="font-size: 11px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p> | |
<p class="s12" style="font-size: 12px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p> | |
<p class="s14" style="font-size: 14px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p> | |
<p class="s18" style="font-size: 18px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p> | |
<p class="s24" style="font-size: 24px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p> | |
<p class="s30" style="font-size: 30px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p> | |
<p class="s36" style="font-size: 36px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p> | |
<p class="s48" style="font-size: 48px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p> | |
<p class="s60" style="font-size: 60px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p> | |
<p class="s72" style="font-size: 72px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p> | |
</div> | |
</div> | |
<div class="demo" style="font-family: 'Gill Sans Nova Book'; font-weight: bold; font-style: normal;"> | |
<h1>Gill Sans Nova Bold</h1> | |
<pre>.your-style { | |
font-family: 'Gill Sans Nova Book'; | |
font-weight: bold; | |
font-style: normal; | |
}</pre> | |
<div class="font-container"> | |
<p class="letters"> | |
абвгдеёжзийклмнопрстуфхцчшщъыьэюя<br> | |
АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ<br> | |
abcdefghijklmnopqrstuvwxyz<br> | |
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br> | |
0123456789.:,;()*!?'@#<>$%&^+-=~ | |
</p> | |
<p class="s10" style="font-size: 10px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p> | |
<p class="s11" style="font-size: 11px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p> | |
<p class="s12" style="font-size: 12px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p> | |
<p class="s14" style="font-size: 14px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p> | |
<p class="s18" style="font-size: 18px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p> | |
<p class="s24" style="font-size: 24px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p> | |
<p class="s30" style="font-size: 30px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p> | |
<p class="s36" style="font-size: 36px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p> | |
<p class="s48" style="font-size: 48px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p> | |
<p class="s60" style="font-size: 60px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p> | |
<p class="s72" style="font-size: 72px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p> | |
</div> | |
</div> | |
<div class="demo" style="font-family: 'Gill Sans Nova Book'; font-weight: bold; font-style: italic;"> | |
<h1>Gill Sans Nova Bold Italic</h1> | |
<pre>.your-style { | |
font-family: 'Gill Sans Nova Book'; | |
font-weight: bold; | |
font-style: italic; | |
}</pre> | |
<div class="font-container"> | |
<p class="letters"> | |
абвгдеёжзийклмнопрстуфхцчшщъыьэюя<br> | |
АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ<br> | |
abcdefghijklmnopqrstuvwxyz<br> | |
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br> | |
0123456789.:,;()*!?'@#<>$%&^+-=~ | |
</p> | |
<p class="s10" style="font-size: 10px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p> | |
<p class="s11" style="font-size: 11px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p> | |
<p class="s12" style="font-size: 12px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p> | |
<p class="s14" style="font-size: 14px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p> | |
<p class="s18" style="font-size: 18px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p> | |
<p class="s24" style="font-size: 24px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p> | |
<p class="s30" style="font-size: 30px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p> | |
<p class="s36" style="font-size: 36px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p> | |
<p class="s48" style="font-size: 48px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p> | |
<p class="s60" style="font-size: 60px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p> | |
<p class="s72" style="font-size: 72px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p> | |
</div> | |
</div> | |
</div> | |
</body> | |
</html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
gill |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@font-face { | |
font-family: 'Gill Sans Nova Cn Book'; | |
src: url('GillSansNova-CnBold.woff2') format('woff2'), | |
url('GillSansNova-CnBold.woff') format('woff'); | |
font-weight: bold; | |
font-style: normal; | |
} | |
@font-face { | |
font-family: 'Gill Sans Nova'; | |
src: url('GillSansNova-Heavy.woff2') format('woff2'), | |
url('GillSansNova-Heavy.woff') format('woff'); | |
font-weight: 900; | |
font-style: normal; | |
} | |
@font-face { | |
font-family: 'Gill Sans Nova Book'; | |
src: url('GillSansNova-Book.woff2') format('woff2'), | |
url('GillSansNova-Book.woff') format('woff'); | |
font-weight: normal; | |
font-style: normal; | |
} | |
@font-face { | |
font-family: 'Gill Sans Nova Cn'; | |
src: url('GillSansNova-CnHeavy.woff2') format('woff2'), | |
url('GillSansNova-CnHeavy.woff') format('woff'); | |
font-weight: 900; | |
font-style: normal; | |
} | |
@font-face { | |
font-family: 'Gill Sans Nova Book'; | |
src: url('GillSansNova-Bold.woff2') format('woff2'), | |
url('GillSansNova-Bold.woff') format('woff'); | |
font-weight: bold; | |
font-style: normal; | |
} | |
@font-face { | |
font-family: 'Gill Sans Nova Book'; | |
src: url('GillSansNova-BoldItalic.woff2') format('woff2'), | |
url('GillSansNova-BoldItalic.woff') format('woff'); | |
font-weight: bold; | |
font-style: italic; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment