243 lines
8.3 KiB
HTML
243 lines
8.3 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Citadel Script Fonts Demo</title>
|
|
<style type="text/css">
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style-type: none;
|
|
}
|
|
body {
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
line-height: 1.5;
|
|
font-size: 16px;
|
|
padding: 20px;
|
|
color: #333;
|
|
background-image: url(data:image/gif;base64,R0lGODlhCgAKAIAAAP////Dw8CwAAAAACgAKAAACEIwDh5fsv2AzU0UKb5071wIAOw==);
|
|
}
|
|
a {
|
|
color: #66a523;
|
|
}
|
|
a:hover,
|
|
.g:hover {
|
|
opacity: 0.7;
|
|
}
|
|
h1 {
|
|
font-size: 60px;
|
|
border-bottom: 1px solid #bbb;
|
|
line-height: 20px;
|
|
color: #000;
|
|
text-transform: uppercase;
|
|
margin-top: 20px;
|
|
}
|
|
h1 a {
|
|
font-size: 18px;
|
|
color: #66a523;
|
|
text-decoration: none;
|
|
text-transform: capitalize;
|
|
margin-left: 10px;
|
|
}
|
|
h1 font {
|
|
font-size: 40px;
|
|
}
|
|
.info {
|
|
float: left;
|
|
font-size: 14px;
|
|
margin-top: 30px;
|
|
color: #666;
|
|
}
|
|
.info .inst {
|
|
font-size: 22px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.info span,
|
|
.by span {
|
|
color: #fff;
|
|
border-radius: 2px;
|
|
display: inline-block;
|
|
width: 18px;
|
|
height: 18px;
|
|
text-align: center;
|
|
margin-right: 10px;
|
|
background-color: #333333;
|
|
font-size: 12px;
|
|
line-height: 18px;
|
|
}
|
|
.info .exs {
|
|
font-size: 12px;
|
|
color: #666;
|
|
margin-left: 35px;
|
|
display: block;
|
|
}
|
|
.info .exs font {
|
|
color: #f00;
|
|
line-height: 30px;
|
|
}
|
|
.demo {
|
|
float: left;
|
|
width: 100%;
|
|
height: auto;
|
|
padding-bottom: 10px;
|
|
margin-top: 70px;
|
|
background-color: #fff;
|
|
border-radius: 5px;
|
|
}
|
|
.demo a {
|
|
color: #1a73e8;
|
|
float: left;
|
|
font-weight: bold;
|
|
font-size: 14px;
|
|
padding-right: 30px;
|
|
padding-left: 30px;
|
|
position: relative;
|
|
border-top-width: 1px;
|
|
border-top-style: dotted;
|
|
border-top-color: #1a73e8;
|
|
text-decoration: none;
|
|
border-bottom-width: 1px;
|
|
border-bottom-style: dotted;
|
|
border-bottom-color: #1a73e8;
|
|
line-height: 40px;
|
|
margin-top: -40px;
|
|
}
|
|
.demo .t {
|
|
font-size: 24px;
|
|
float: left;
|
|
width: calc(100% - 20px);
|
|
color: #000;
|
|
height: 120px;
|
|
margin-top: 20px;
|
|
line-height: 1.2em;
|
|
overflow-x: hidden;
|
|
padding: 10px;
|
|
}
|
|
.by {
|
|
padding-top: 15px;
|
|
float: left;
|
|
width: 100%;
|
|
margin-top: 10px;
|
|
margin-right: 0;
|
|
margin-bottom: 10px;
|
|
margin-left: 0;
|
|
font-size: 14px;
|
|
color: #666;
|
|
}
|
|
.by .b {
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
color: #333;
|
|
}
|
|
.by .a {
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
margin-left: 34px;
|
|
font-size: 12px;
|
|
}
|
|
.te {
|
|
width: 100%;
|
|
height: auto;
|
|
border: 0px solid #ccc;
|
|
resize: none;
|
|
float: left;
|
|
margin-top: 10px;
|
|
line-height: 16px;
|
|
overflow: hidden;
|
|
border-radius: 5px;
|
|
color: #000000;
|
|
background-color: #fff;
|
|
font-size: 12px;
|
|
margin-bottom: 20px;
|
|
text-indent: 10px;
|
|
padding-top: 17px;
|
|
padding-bottom: 17px;
|
|
}
|
|
pre {
|
|
color: #000;
|
|
}
|
|
</style>
|
|
<style type="text/css">
|
|
@font-face {
|
|
font-family: 'Citadel Script';
|
|
src: url('b9583eae10a51eee606cae74cf802753.eot');
|
|
src:
|
|
url('b9583eae10a51eee606cae74cf802753.eot?#iefix') format('embedded-opentype'),
|
|
url('b9583eae10a51eee606cae74cf802753.woff') format('woff'),
|
|
url('b9583eae10a51eee606cae74cf802753.woff2') format('woff2'),
|
|
url('b9583eae10a51eee606cae74cf802753.ttf') format('truetype'),
|
|
url('b9583eae10a51eee606cae74cf802753.svg#Citadel Script') format('svg');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>
|
|
<span>[ <font>Demo</font> ]</span><a href="http://www.onlinewebfonts.com" target="_blank">Web Fonts</a>
|
|
</h1>
|
|
<div class="info">
|
|
<div class="inst">Instructions:</div>
|
|
<span>1</span>Use font-face declaration Fonts.
|
|
<div class="exs">
|
|
<pre>
|
|
|
|
@font-face{
|
|
font-family: "Citadel Script";
|
|
src: url("b9583eae10a51eee606cae74cf802753.eot");
|
|
src: url("b9583eae10a51eee606cae74cf802753.eot?#iefix")format("embedded-opentype"),
|
|
url("b9583eae10a51eee606cae74cf802753.woff")format("woff"),
|
|
url("b9583eae10a51eee606cae74cf802753.woff2")format("woff2"),
|
|
url("b9583eae10a51eee606cae74cf802753.ttf")format("truetype"),
|
|
url("b9583eae10a51eee606cae74cf802753.svg#Citadel Script")format("svg");
|
|
font-weight:normal;
|
|
font-style:normal;
|
|
font-display:swap;
|
|
}
|
|
|
|
</pre
|
|
>
|
|
</div>
|
|
<span>or</span>To embed a font, copy the code into the head of your html
|
|
<div class="exs">
|
|
<br />
|
|
<pre>
|
|
<link href="https://db.onlinewebfonts.com/c/b9583eae10a51eee606cae74cf802753?family=Citadel+Script" rel="stylesheet"></pre
|
|
>
|
|
<br />
|
|
</div>
|
|
<span>2</span>CSS rules to specify families
|
|
<div class="exs">
|
|
<font>Use example:</font> <br />
|
|
<pre>
|
|
font-family: "Citadel Script";
|
|
</pre
|
|
>
|
|
</div>
|
|
</div>
|
|
<!--demo-->
|
|
<div class="demo">
|
|
<a href="https://www.onlinewebfonts.com/download/b9583eae10a51eee606cae74cf802753" target="_blank">Citadel Script</a>
|
|
<div class="t" style="font-family: 'Citadel Script'">
|
|
OnlineWebFonts.Com Some fonts provided are trial versions of full versions and may not allow embedding unless a commercial license is
|
|
purchased or may contain a limited character set. Please review any files included with your download, which will usually include
|
|
information on the usage and licenses of the fonts. If no information is provided, please use at your own discretion or contact the
|
|
author directly.
|
|
</div>
|
|
</div>
|
|
<!--demo-->
|
|
<div class="by">
|
|
<div class="b"><span>3</span>License and attribution:</div>
|
|
<div class="a">
|
|
You must credit the author Copy this link ( <a href="http://www.onlinewebfonts.com" target="_blank">oNlineWebFonts.Com</a> ) on your
|
|
web
|
|
</div>
|
|
<div class="b"><span>4</span>Copy the Attribution License:</div>
|
|
<div class="te">
|
|
<div>Fonts made from <a href="http://www.onlinewebfonts.com">Web Fonts</a>is licensed by CC BY 4.0</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|