Cufon在提交時呈現輸入文本

Question

我一直在尋找字體網站，在提交時呈現所選字體的輸入文本，並想知道如何使用Cufon完成此操作。

一個例子，如這裏：

http://www.fontsquirrel.com/fonts/Nobile#testdrive - 選擇試駕標籤

這裏：

http://new.myfonts.com/fonts/lucassharp/hera-big/向下滾動，進入自己的示例文本。

Answer 1

試試這個

<div class="btn_submit btn_normal spacer-100 "> 
<h2>Next</h2> 
<input type="submit" name="submit" value="" class="btnsubmit" /> 
</div> 


/*Required CSS*/ 
.spacer-100{width:100px;} 

.btn_submit{margin:22px auto; overflow:hidden; position:relative; 
padding:2.5% 3%; 
background: #e0efff; background-repeat:repeat; 
background: -webkit-gradient(linear, left top, left bottom, from(#f9fcff), to(#e0efff)); 
background: -moz-linear-gradient(center top, #f9fcff, #e0efff); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9fcff', endColorstr='#e0efff'); 
border-top:1px solid #e2effc; border-right:1px solid #a8cae9;border-bottom:1px solid #91bbe0;border-left:1px solid #e2effc; 

} 
.btn_submit:hover{ 
background: #a8cae9; background-repeat:repeat; 
background: -webkit-gradient(linear, left top, left bottom, from(#f9fcff), to(#a8cae9)); 
background: -moz-linear-gradient(center top, #f9fcff, #a8cae9); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9fcff', endColorstr='#a8cae9'); 
border-top:1px solid #e2effc; border-right:1px solid #a8cae9;border-bottom:1px solid #91bbe0;border-left:1px solid #e2effc; 

} 
.btn_submit h2{color:#002e4f; font-size:22px; text-align:center;} 
.btn_submit input[type="submit"]{position:absolute; left:0px; top:0px; z-index:5;  display:block; overflow:visible; border:0px none; background:none; height:46px; cursor:pointer; } 


    ////////--------- required Jquery 

$(document).ready(function(){ 
var wt = $('.btn_normal').width(); 
var ht = $('.btn_normal').height(); 
$('.btnsubmit').css({width:wt+25}) //25 is the button padding 
})