pn-design-assets
Version:
Icons, SCSS, and more for PostNord Graphical Guidelines
180 lines (155 loc) • 8.45 kB
HTML
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>StagSansWeb-Light Demo</title>
<style type="text/css">
@font-face {
font-family: "StagSansWeb-Light";
src: url("StagSansWeb-Light.eot?") format("embedded-opentype"),
url("StagSansWeb-Light.woff") format("woff"),
url("StagSansWeb-Light.svg") format("svg"),
url("StagSansWeb-Light.ttf") format("opentype");
font-style: normal;
font-weight: 400;
font-stretch: normal;
}
@font-face {
font-family: "Commercial";
src: url(data:application/otf;base64,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);
font-style: normal;
font-weight: normal;
font-stretch: normal;
}
body {
background-color: white;
padding: 10px;
margin: 0px;
font-family: Helvetica;
}
h1 {
font-family: Helvetica;
font-weight: normal;
font-size: 12px;
margin: 30px 0px 10px 0px;
padding: 0px 0px 10px 0px;
border-bottom: 1px solid black;
}
h1.nameplate {
font-family: "Commercial";
font-weight: normal;
font-size: 36px;
color:#60B6FF;
margin: 30px 0px 10px 0px;
padding: 0px 0px 10px 0px;
border-bottom: 1px solid black;
}
p {
margin: 0px 0px 2px 0px;
font-family: "StagSansWeb-Light";
font-style: normal;
font-weight: 400;
font-stretch: normal;
}
pre {
font-family: Menlo, Monaco, monospace;
font-size: 12px;
}
table {
font-family: Helvetica;
font-size: 12px;
padding: 0px;
background-color: rgba(0,0,0,.05);
}
tr:nth-child(odd) {
background-color: rgba(0,0,0,.05);
}
td {
padding: 5px;
}
</style>
</head>
<body>
<h1 class='nameplate'>Commercial</h1>
<p style="font-size: 75px">StagSansWeb-Light</p>
<h1>Show the raw CSS @font-face rule:</h1>
<pre>@font-face {
font-family: "StagSansWeb-Light";
src: url("StagSansWeb-Light.eot?") format("embedded-opentype"),
url("StagSansWeb-Light.woff") format("woff"),
url("StagSansWeb-Light.svg") format("svg"),
url("StagSansWeb-Light.ttf") format("opentype");
font-style: normal;
font-weight: 400;
font-stretch: normal;
}</pre>
<h1>Waterfall:</h1>
<table class="StagSansWeb-Light">
<tr>
<th>9</th>
<td style="font-size: 9px">
<p>THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG</p>
<p>the quick brown fox jumps over the lazy dog</p>
</td>
</tr>
<tr>
<th>10</th>
<td style="font-size: 10px">
<p>THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG</p>
<p>the quick brown fox jumps over the lazy dog</p>
</td>
</tr>
<tr>
<th>12</th>
<td style="font-size: 12px">
<p>THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG</p>
<p>the quick brown fox jumps over the lazy dog</p>
</td>
</tr>
<tr>
<th>14</th>
<td style="font-size: 14px">
<p>THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG</p>
<p>the quick brown fox jumps over the lazy dog</p>
</td>
</tr>
<tr>
<th>16</th>
<td style="font-size: 16px">
<p>THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG</p>
<p>the quick brown fox jumps over the lazy dog</p>
</td>
</tr>
<tr>
<th>18</th>
<td style="font-size: 18px">
<p>THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG</p>
<p>the quick brown fox jumps over the lazy dog</p>
</td>
</tr>
<tr>
<th>20</th>
<td style="font-size: 20px">
<p>THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG</p>
<p>the quick brown fox jumps over the lazy dog</p>
</td>
</tr>
<tr>
<th>24</th>
<td style="font-size: 24px">
<p>THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG</p>
<p>the quick brown fox jumps over the lazy dog</p>
</td>
</tr>
<tr>
<th>36</th>
<td style="font-size: 36px">
<p>THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG</p>
<p>the quick brown fox jumps over the lazy dog</p>
</td>
</tr>
</table>
<h1>Licensing Information, Questions, or Help:</h1>
<p style="font-family: Helvetica;font-size: 16px;">info@commercialtype.com</p>
</body>
</html>