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
})