HSF-2020-CFP-Website/fonts/@font-face/Demo.html

95 lines
6.8 KiB
HTML
Raw Permalink Normal View History

2019-10-12 20:07:48 +00:00
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Museo W01 500 Font - OnlineWebFonts.COM</title>
<style type="text/css">
@font-face {font-family: "Museo W01 500";
src: url("d4d3be6c923464b81f4e89e6a57bc539.eot"); /* IE9*/
src: url("d4d3be6c923464b81f4e89e6a57bc539.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
url("d4d3be6c923464b81f4e89e6a57bc539.woff2") format("woff2"), /* chrome、firefox */
url("d4d3be6c923464b81f4e89e6a57bc539.woff") format("woff"), /* chrome、firefox */
url("d4d3be6c923464b81f4e89e6a57bc539.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url("d4d3be6c923464b81f4e89e6a57bc539.svg#Museo W01 500") format("svg"); /* iOS 4.1- */
}
*{margin:0;padding:0;list-style:none;}pre{border:solid 1px #e7e1cd;background-color:#fffdef;overflow:auto;font-size:12px;line-height:14px;margin-top:10px;margin-right:0;margin-bottom:10px;margin-left:0;padding-top:5px;padding-right:10px;padding-bottom:5px;padding-left:10px;}.demo pre{color:#000;line-height: 1.2em;font-family:"Museo W01 500"!important;font-size:22px;background-color:#FFF;border-top-width:0px;border-right-width:0px;border-bottom-width:0px;border-left-width:0px;}body{font-family:sans-serif;line-height:1.5;font-size:16px;padding:20px;color:#333;}:hover,:before,:after{-webkit-transition:all 0.1s ease-in;-moz-transition:all 0.1s ease-in;-ms-transition:all 0.1s ease-in;-o-transition:all 0.1s ease-in;transition:all 0.1s ease-in;}*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;}a{color:#66A523;}h1.logo{font-size:40px;letter-spacing:-1px;margin-top:-16px;}h1.logo strong{font-size:16px;font-family:sans-serif;color:#333;}h1.logo a{color:#34302d;text-decoration:none;}h1.logo a span{color:#66A523;}h1.logo a small{color:#006699;}.info{float:left;font-size:14px;margin-top:15px;}.info ul{margin-left:0px;color:#111;margin-bottom:20px;}.info .exs{font-size:12px;color:#666;margin-left:35px;display:block;}.info ul li{margin-top:10px;list-style:none;}.info .numno{color:#fff;border-radius:20px;padding:1px;display:inline-block;width:22px;height:22px;text-align:center;margin-right:10px;background-color:#999999;}.info ul strong{font-weight:normal;color:#000;}.info .inst{font-size:22px;margin-bottom:10px;}.demo{float:left;width:100%;height:auto;border-top-width:1px;border-top-style:solid;border-top-color:#bbb;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#bbb;padding-bottom:10px;}.demo .demo_svg{float:left;height:auto;width:100px;margin-right:5px;margin-left:5px;margin-bottom:10px;}.demo .demo_svg i{float:left;height:80px;width:80px;text-align:center;font-size:40px;margin-left:10px;line-height:80px;color:#777;}.demo .demo_svg .code{float:left;height:20px;width:100%;overflow:hidden;text-align:center;line-height:20px;font-size:11px;color:#666;}.demo .demo_svg .txt{float:left;height:20px;width:100%;font-size:11px;text-align:center;white-space:nowrap;overflow:hidden;line-height:20px;}.demo .demo_svg:hover i{font-size:60px;color:#333;}.by{padding-top:15px;float:left;width:100%;margin-top:10px;margin-right:0;margin-bottom:10px;margin-left:0;}.by{margin-bottom:10px;font-size:20px;}.by .attr{font-size:14px;color:#333;padding-top:10px;padding-bottom:10px;}textarea{width:80%;height:auto;border:1px solid #CCC;resize:none;background:#EEE;padding:20px;float:left;margin-top:10px;line-height:30px;}#footer{float:left;width:100%;margin-top:10px;padding-bottom:20px;}h2{background-color:#000;padding-top:10px;padding-bottom:10px;padding-left:10px;color:#FFF;}
</style>
</head>
<body>
<h1 class="logo"> <a href="http://www.onlinewebfonts.com/"> <span>Online</span><small>Web</small>Fonts</a> <strong>Font Demo</strong></h1>
<h2>
Museo W01 500 Font <a style="font-size:14px;" href="http://www.onlinewebfonts.com/download/d4d3be6c923464b81f4e89e6a57bc539" target="_blank">More Format Downloads</a></h2>
<div class="info">
<div class="inst">Instructions:</div>
<ul>
<li>
<p> <span class="numno">1</span>Use font-face declaration Fonts.<br />
<span class="exs">
<pre>
@font-face {font-family: "Museo W01 500";
src: url("d4d3be6c923464b81f4e89e6a57bc539.eot"); /* IE9*/
src: url("d4d3be6c923464b81f4e89e6a57bc539.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
url("d4d3be6c923464b81f4e89e6a57bc539.woff2") format("woff2"), /* chrome、firefox */
url("d4d3be6c923464b81f4e89e6a57bc539.woff") format("woff"), /* chrome、firefox */
url("d4d3be6c923464b81f4e89e6a57bc539.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url("d4d3be6c923464b81f4e89e6a57bc539.svg#Museo W01 500") format("svg"); /* iOS 4.1- */
}
</pre>
</span>
</li>
<li>
<p> <span class="numno">2</span>Settings font css style <br />
<span class="exs">
<pre>
.demo{
font-family:"Museo W01 500" !important;
font-size:16px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;}
</pre>
</span>
</li>
<li>
<p> <span class="numno">3</span>View DEMO <br />
<span class="exs"><pre>
&lt;div class="demo"&gt; www.OnlineWebFonts.Com &lt;/div&gt;
</pre></span>
</li>
<li>
<p> <span class="numno">OR</span>Or add to the head section of page. <br />
<span class="exs"><pre>
&lt;link href="//db.onlinewebfonts.com/c/d4d3be6c923464b81f4e89e6a57bc539?family=Museo+W01+500" rel="stylesheet" type="text/css"/&gt;
</pre></span>
</li>
</ul>
</div>
<div class="demo">
<pre>
OnlineWebFonts.Com features an amazing collection of free fonts,
premium fonts and free dingbats. With over 8,000,000 freeware fonts,
you've come to the best place to download fonts!
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.
0123456789 /*-+~!@#$%^&*()-=_+{}[]:;"'|\<>.?
</pre>
</div>
<div class="by">
<div class="by_title">License and attribution:</div>
<div class="attr">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="usetitle">Copy the Attribution License:</div>
<textarea onclick="this.focus();this.select();">&lt;div&gt;Icons made from &lt;a href="http://www.onlinewebfonts.com"&gt;oNline Web Fonts&lt;/a&gt;is licensed by CC BY 3.0&lt;/div&gt;</textarea>
</div>
<div id="footer">
<div>Generated by <a href="http://www.onlinewebfonts.com" target="_blank">oNlineWebFonts.Com</a></div>
</div>
</body>
</html>