79 lines
5.1 KiB
HTML
79 lines
5.1 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>
|