homepage Welcome to WebmasterWorld Guest from 54.242.126.126
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Using Web fonts and Cufon
toplisek

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4416253 posted 1:19 pm on Feb 10, 2012 (gmt 0)

I'm testing Cufon options and working example at URL:
[davidwalsh.name...]

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:
<script type="text/javascript">
window.addEvent('domready',function() {
Cufon.replace('#cufon-area h1, #cufon-area h2, #cufon-area h3');
});
</script>
Need help.

Working script:
<!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>

 

toplisek

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4416253 posted 10:50 am on Feb 21, 2012 (gmt 0)

Is there possible to reply?

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved