Last active
October 15, 2020 00:28
-
-
Save mfd/db2fdd86153f7feda14e5014aacfb17f to your computer and use it in GitHub Desktop.
GillSans
This file contains 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 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 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