authentik-win95-setup/w95-title-font/example.html

174 lines
22 KiB
HTML
Raw Normal View History

2024-02-19 23:39:33 +00:00
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Scheherazade Bold WebFont</title>
<meta name="description" content="Scheherazade Bold WebFont" />
<meta name="keywords" content="Scheherazade Bold WebFont" />
<style type="text/css">
@font-face {
font-family: 'Scheherazade-Bold';
src: url('Scheherazade-Bold.ttf.woff') format('woff'),
url('Scheherazade-Bold.ttf.svg#Scheherazade-Bold') format('svg'),
url('Scheherazade-Bold.ttf.eot'),
url('Scheherazade-Bold.eot?#iefix') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}.examplefontl {
font-family: 'Scheherazade-Bold';
color: black;
}
.examplefont {
padding-bottom: 2em;
overflow: hidden;
text-align: center;
}
.examplefont div {
float: left;
border: 1px solid #ccc;
text-align: center;
width: 1.25em;
height: 2em;
margin-right: -1px;
margin-bottom: -1px;
font-size: 3.2em;
}
.examplefont div .defaultC {
color: #ccc;
font-family: arial, sans-serif;
font-size: .4em;
display: block;
}
*{margin:0;padding:0;}
body{margin:0px;padding:0px;background:#FFFFFF url(images/bgtile.gif?1) repeat-x;font-family:Arial, Helvetica, sans-serif;}
#header{background:url(images/headertile.gif);height:73px;margin:0px;overflow:hidden;}
#head{width:707px;float:left;height:31px;margin:39px 0 0 0;padding:0px;color:#ffffff;font-size:15px;border-bottom:1px solid #c94040;overflow:hidden;}
#head a{color:#ffffff;text-decoration:none;}
#headspan1{float:left;}
.container{width:994px;margin:0 auto;padding:0px;overflow:hidden;}
#content{width:734px;margin:5px 0px 0px 5px;float:left;padding:0px;font-size:12px;display:inline;color:#868e8e;overflow:hidden;}
.fontbox{background:url(images/fontboxtile.gif);width:734px;margin:0 0 18px 0;padding:0;overflow:hidden;}
.fontboxtop{background:url(images/fontboxtop.gif) no-repeat top left;height:18px;font-size:12px;color:#373d3d;width:718px;padding:8px;margin:0;overflow:hidden;}
.fontboxtop a{color:#373d3d;text-decoration:none;}
.fontboxspan1{background:url(images/free.gif) no-repeat;padding:2px 0 2px 42px;float:left;}
h6{background:url(images/logo.gif) top left no-repeat;width:230px;height:73px;margin:0px 0px 0px 7px;float:left;}
h6 a{display:block;height:73px;}
h6 a span{display:none;}
h1{display:inline;font-size:12px;font-weight:bold;color:#546060;padding:0px;float:left;}
.btn{border:0;margin:0;background:url('images/button.gif');background-repeat:repeat-x;color:#fff;width:127px;height:28px;font-size:17px;}
.inputsubtmi{border:1px solid #e1ebeb;border-bottom:2px solid #c7d1d1;padding:6px;margin:0 0 8px 0;}
.partner{font-size:16px;font-weight:bold;color:#000000;padding:0px;margin:39px 0px 12px 30px;}
.fontboxspan1notfree{padding:2px 0 2px 42px;float:left;}
#footer{height:123px;margin:0px;padding:0px;background:url(http://www.altfonts.com/images/foottile.gif);}
#foot{width:1005px;height:123px;background:url(http://www.altfonts.com/images/foot.gif) top left no-repeat;margin:0 auto;padding:0px;}
#copyright{height:31px;padding:28px 0 0 118px;margin:0 0 0 27px;border-bottom:1px solid #c33636;font-size:14px;color:#4a1616;}
code {
white-space: pre;
background-color: #eee;
display: block;
padding: 10px;
margin-bottom: 18px;
overflow: auto;
}
</style>
</head>
<body>
<div id="header">
<div class="container">
<h6><a href="http://webfonts.ffonts.net" title="WebFonts"><span>WebFonts</span></a></h6>
<div id="head">
<span id="headspan1">
<span style="font-family: 'Scheherazade-Bold';font-size: 20px; color: white;">Scheherazade Bold</span>
</span>
</div>
</div>
</div>
<div class="container">
<div id="content">
<!-- WebFont -->
<div class="fontbox">
<div class="fontboxtop"><span class="fontboxspan1"><h1>Scheherazade Bold WebFont</h1></span></div>
<textarea id="txtAreaTryFont" cols="" rows="2" style="font-family: 'Scheherazade-Bold';width:97%; font-size: 50px; height: 130px;text-align: center;margin-left: 15px;"
onclick="if (this.value=='Type here to change the text') this.value=''">Type here to change the text</textarea>
<img src="images/fontboxbottom.gif" width="734" height="7" alt="" />
</div>
<div class="fontbox">
<div class="fontboxtop"><b>Copyright info</b></div>
<div style="text-align: left;margin-left:20px;color: black;font-size:15px;line-height:200%">
Copyright (c) 1994-2014, SIL International (http://www.sil.org/).<br />
Copyright [c] 1994-2015 SIL International. All rights reserved.
</div>
<img src="images/fontboxbottom.gif" width="734" height="7" alt="" />
</div>
<div class="fontbox">
<div class="fontboxtop"><b>Information 64px</b></div>
<div style="font-family: 'Scheherazade-Bold';margin-left:20px;font-size:64px;color:black;float: left;display: inline; overflow: hidden;height:100px;">
Quisque vitae urna sit amet ipsum lobortis iaculis volutpat sit amet nibh.
</div>
<img src="images/fontboxbottom.gif" width="734" height="7" alt="" />
</div>
<div class="fontbox">
<div class="fontboxtop"><b>Information 32px</b></div>
<div style="font-family: 'Scheherazade-Bold';margin-left:20px;font-size:30px;color:black;float: left;display: inline; overflow: hidden;height:60px;">
Vivamus bibendum augue vitae mi imperdiet volutpat tempor tellus lacinia. Integer in sem et neque iaculis malesuada.
</div>
<img src="images/fontboxbottom.gif" width="734" height="7" alt="" />
</div>
<div class="fontbox">
<div class="fontboxtop"><b>Information 16px</b></div>
<div style="font-family: 'Scheherazade-Bold';margin-left:20px;font-size:16px;color:black;float: left;display: inline; overflow: hidden;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus erat elit, accumsan id lacinia in, vulputate auctor sapien. Phasellus euismod consequat magna, ut lobortis tellus semper sed. Fusce sollicitudin fermentum tortor, ut malesuada mauris aliquet fermentum. Maecenas luctus sapien vel turpis iaculis vitae commodo nibh cursus. Praesent vel suscipit orci. Praesent elit velit, bibendum at laoreet a, tristique non metus. Maecenas vitae vulputate justo. Aliquam velit ligula, scelerisque eget sagittis nec, tempus eu risus.
</div>
<img src="images/fontboxbottom.gif" width="734" height="7" alt="" />
</div>
<div class="fontbox">
<div class="fontboxtop"><b>Information</b></div>
<div class="examplefont examplefontl" style="text-align: center;margin-left:20px;">
<div><span class="defaultC">&#33;</span><span>&#33;</span></div><div><span class="defaultC">&#34;</span><span>&#34;</span></div><div><span class="defaultC">&#35;</span><span>&#35;</span></div><div><span class="defaultC">&#36;</span><span>&#36;</span></div><div><span class="defaultC">&#37;</span><span>&#37;</span></div><div><span class="defaultC">&#38;</span><span>&#38;</span></div><div><span class="defaultC">&#39;</span><span>&#39;</span></div><div><span class="defaultC">&#40;</span><span>&#40;</span></div><div><span class="defaultC">&#41;</span><span>&#41;</span></div><div><span class="defaultC">&#42;</span><span>&#42;</span></div><div><span class="defaultC">&#43;</span><span>&#43;</span></div><div><span class="defaultC">&#44;</span><span>&#44;</span></div><div><span class="defaultC">&#45;</span><span>&#45;</span></div><div><span class="defaultC">&#46;</span><span>&#46;</span></div><div><span class="defaultC">&#47;</span><span>&#47;</span></div><div><span class="defaultC">&#48;</span><span>&#48;</span></div><div><span class="defaultC">&#49;</span><span>&#49;</span></div><div><span class="defaultC">&#50;</span><span>&#50;</span></div><div><span class="defaultC">&#51;</span><span>&#51;</span></div><div><span class="defaultC">&#52;</span><span>&#52;</span></div><div><span class="defaultC">&#53;</span><span>&#53;</span></div><div><span class="defaultC">&#54;</span><span>&#54;</span></div><div><span class="defaultC">&#55;</span><span>&#55;</span></div><div><span class="defaultC">&#56;</span><span>&#56;</span></div><div><span class="defaultC">&#57;</span><span>&#57;</span></div><div><span class="defaultC">&#58;</span><span>&#58;</span></div><div><span class="defaultC">&#59;</span><span>&#59;</span></div><div><span class="defaultC">&#60;</span><span>&#60;</span></div><div><span class="defaultC">&#61;</span><span>&#61;</span></div><div><span class="defaultC">&#62;</span><span>&#62;</span></div><div><span class="defaultC">&#63;</span><span>&#63;</span></div><div><span class="defaultC">&#64;</span><span>&#64;</span></div><div><span class="defaultC">&#65;</span><span>&#65;</span></div><div><span class="defaultC">&#66;</span><span>&#66;</span></div><div><span class="defaultC">&#67;</span><span>&#67;</span></div><div><span class="defaultC">&#68;</span><span>&#68;</span></div><div><span class="defaultC">&#69;</span><span>&#69;</span></div><div><span class="defaultC">&#70;</span><span>&#70;</span></div><div><span class="defaultC">&#71;</span><span>&#71;</span></div><div><span class="defaultC">&#72;</span><span>&#72;</span></div><div><span class="defaultC">&#73;</span><span>&#73;</span></div><div><span class="defaultC">&#74;</span><span>&#74;</span></div><div><span class="defaultC">&#75;</span><span>&#75;</span></div><div><span class="defaultC">&#76;</span><span>&#76;</span></div><div><span class="defaultC">&#77;</span><span>&#77;</span></div><div><span class="defaultC">&#78;</span><span>&#78;</span></div><div><span class="defaultC">&#79;</span><span>&#79;</span></div><div><span class="defaultC">&#80;</span><span>&#80;</span></div><div><span class="defaultC">&#81;</span><span>&#81;</span></div><div><span class="defaultC">&#82;</span><span>&#82;</span></div><div><span class="defaultC">&#83;</span><span>&#83;</span></div><div><span class="defaultC">&#84;</span><span>&#84;</span></div><div><span class="defaultC">&#85;</span><span>&#85;</span></div><div><span class="defaultC">&#86;</span><span>&#86;</span></div><div><span class="defaultC">&#87;</span><span>&#87;</span></div><div><span class="defaultC">&#88;</span><span>&#88;</span></div><div><span class="defaultC">&#89;</span><span>&#89;</span></div><div><span class="defaultC">&#90;</span><span>&#90;</span></div><div><span class="defaultC">&#91;</span><span>&#91;</span></div><div><span class="defaultC">&#92;</span><span>&#92;</span></div><div><span class="defaultC">&#93;</span><span>&#93;</span></div><div><span class="defaultC">&#94;</span><span>&#94;</span></div><div><span class="defaultC">&#95;</span><span>&#95;</span></div><div><span class="defaultC">&#96;</span><span>&#96;</span></di
</div>
<img src="images/fontboxbottom.gif" width="734" height="7" alt="" />
</div>
<div class="fontbox">
<div class="fontboxtop"><b>Installing Webfonts</b></div>
<div style="text-align: left;margin-left:20px;color: black;font-size:15px;line-height:200%">
1. Upload the files from this zip to your domain.<br />
2. Add this code to your website:<br />
<code>
@font-face {
font-family: 'Scheherazade-Bold';
src:url('Scheherazade-Bold.ttf.woff') format('woff'),
url('Scheherazade-Bold.ttf.svg#Scheherazade-Bold') format('svg'),
url('Scheherazade-Bold.ttf.eot'),
url('Scheherazade-Bold.ttf.eot?#iefix') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
</code>
3. Integrate the fonts into your CSS:<br />
Add the font name to your CSS styles. For example:
<code>
h1 {
font-family: 'Scheherazade-Bold';
}
</code>
</div>
<img src="images/fontboxbottom.gif" width="734" height="7" alt="" />
</div>
<div class="fontbox">
<div class="fontboxtop"><b>Troubleshooting Webfonts</b></div>
<div style="text-align: left;margin-left:20px;color: black;font-size:15px;line-height:200%">
1. You may be using the fonts on different domain or subdomain.<Br />
2. Check if you have linked the fonts properly in the CSS.<Br />
</div>
<img src="images/fontboxbottom.gif" width="734" height="7" alt="" />
</div>
</div>
</div>
<div id="footer">
<div id="foot">
<div id="copyright" style="font-size:11px;color:white;">&copy; - <a href="http://www.ffonts.net" title="Free Fonts" style="color:white;">Free Fonts by www.FFonts.net</a> - </div>
</div>
</div>
</body>
</html>