Menu
I’m testing Cufon options and working example at URL:
[URL=”http://davidwalsh.name/dw-content/cufon.php”]http://davidwalsh.name/dw-content/cufon.php
[code=php]
<script type=”text/javascript”>
window.addEvent(‘domready’,function() {
Cufon.replace(‘#cufon-area h1, #cufon-area h2, #cufon-area h3’);
});
</script>
1. How to set correct HTML to test Cufon as it seems issue that web fonts are not different when I set different web fonts.
2. How to set <canvas> as HTML5 script if there is Javascript CLASS not ID as sample has ID but can be many web fonts:
Need help.
Working script:
[code=php]
<!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” xml:lang=”en” lang=”en”>
<head>
<title></title>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<script type=”text/javascript” src=”javascript/cufon.js”></script>
<script type=”text/javascript” src=”javascript/javascript/Sin_City_400.font.js”></script>
<script type=”text/javascript”>
window.addEvent(‘domready’,function() {
Cufon.replace(‘#cufon-area h1, #cufon-area h2, #cufon-area h3′);
});
</script>
<style type=”text/css”>
/*<![CDATA[*/
/* global */
* { margin:0; padding:0; } html { overflow-y:scroll; }
body{ font-family:’lucida grande’,tahoma,verdana,arial,sans-serif; font-size:62.5%; color:#222; }
/*layout */
.center{ width:1000px; margin:0 auto; }
#page{ }
#header{ height:40px; background:url(/wp-content/themes/walshhub/images/header.gif) 0 bottom repeat-x #fcfcfc; position:relative; }
a#header-logo{ position:absolute; top:7px; left:0; text-indent:-99999px; width:32px; height:25px; display:block; background:url(/wp-content/themes/walshhub/images/dwavatar.png) 0 0 no-repeat; }
#header-title { font-weight:normal; font-family:”Droid Serif”,Cambria,Georgia,Palatino,”Palatino Linotype”,Myriad Pro,Serif; font-size:2em; }
#header-title a{ color:#000; text-decoration:none; position:absolute; top:10px; left:40px; }
#content{ background:#fff; padding:10px 0 10px 0; }
#content-left { width:700px; margin:0 20px 0 0; float:left; }
#content-right { width:280px; float:left; }
#content-right a{ float:left; padding-right:10px; display:block; width:125px; height:125px; }
#footer{ background:#eee; border-top:1px solid #ccc; padding:10px 0; }
#footer1, #footer2, #footer3 { width:300px; float:left; margin:0 30px 0 0; }
#footer3 { width:330px; margin-right:0; }
/* tags */
abbr{ border-bottom:1px dotted #ccc; cursor:help; }
blockquote{ background:#eee; margin:0 20px; padding:10px 20px; }
code{ font-family:’Consolas’, ‘Monaco’, ‘Bitstream Vera Sans Mono’, ‘Courier New’, Courier, monospace !important; }
h1{ font-size:4.3em; margin:0 0 20px 0; }
h2{ font-size:2.8em; }
h1, h2, h3, h6{ font-weight:normal; font-family:”Droid Serif”,Cambria,Georgia,Palatino,”Palatino Linotype”,”Myriad Pro”,Serif; }
h3, h6{ font-size:2em; }
h6{ padding:0 0 5px 0; }
label,select,input[type=’submit’],.point { cursor:pointer; }
li{ }
li,p{ line-height:19px; margin-top:5px; }
ol, ul{ padding:0 0 10px 35px; }
p{ margin:5px 0 14px 0; font-size:1.2em; line-height:1.8em; }
textarea,input[type=’text’], input[type=’email’], input[type=’password’]{ border:1px solid #ccc; padding:5px; font-size:120%; font-family:’lucida grande’,tahoma,verdana,arial,sans-serif; }
/* stuff */
.clear { clear:both; }
.exhead{ background:#e8f0f6; border-top:1px solid #fff; color:#000; padding:10px 10px; font-size:120%; }
.exhead a{ color:#6D84B4; }
.intro{ background:#ffd987; font-style:italic; padding:5px 10px; margin-bottom:20px; }
.relative{ position:relative; }
/* links */
a{ color:#3b5998; }
a:link, a:visited{ text-decoration:underline; }
a:hover, a:active{ text-decoration:none; }
a img{ border:0; }
/*]]>*/
</style>
</head>
<body>
<div id=”cufon-area”>
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href=”#”>Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
</div>
<br /><br /><br /><br /><br />
</body>
</html>