cufon - آموزش از مبتدی تا پیشرفته
cufon - آموزش از مبتدی تا پیشرفته
نویسنده : ایمان یزدانی


همانطور که همه ما میدانیم،امروزه استفاده از فونتها بدلیل یکسری استانداردهای نوشتاری در کدنویسیهای فونتها،مناسب برای تحت وب در برخی از اندازه ها نیستند و یا کاربر پسند نیستند...

پیشنهاد من برای شما دوستان استفاده از فونت های تحت جاوا اسکریپت cufon است که این فونتها علاوه بر زیبایی بسیار قابل توجه چند مورد نه چندان مهم هم مشکلاتی را دارد که چون قابل صرف نظر کردن است از بیان آن خودداری میکنم و برای استفاده از این کتابخوانه با ما همراه باشید.

راه اندازی :
  1. دانلود فایل های مورد نیاز از این لینک
  2. افزودن کدهای زیر به هدر:
    <script type="text/javascript" src="yourdomain/cufon-1.10.min.js"></script>
    <script type="text/javascript" src="yourdomain/bifon-1.1b.min.js"></script> 
  3. افزودن فونت خود به صورت :
    <script type="text/javascript" src="yourdomain/myfont.js"></script> 
  4. فراخوانی تابع برای بخشهای مورد نیاز برای فونت،مانند :
    <script type="text/javascript">
    Cufon.replace('h3', {onBeforeReplace:Bifon.convert});
    </script> 
  5. برای تبدیل فونت مورد علاقه خود به آدرس بیفون مراجعه کنید


تنظیمات پیشرفته

رنگدهی
Cufon.replace('h1', {
    
color'-linear-gradient(white, black)'
}); 

رنگدهی بصورت Gradient
Cufon.replace('h1', {
    
color'-linear-gradient(red, #fff, #23d559, rgb(0, 0, 0))'
}); 

فعال کردن Hover - غیر فعال در پیشفرض
Cufon.replace('h1', {
    
hovertrue
}); 

تغییرات در Hover

Cufon.replace('h1', {
    
hovertrue,
    
hoverables: { strongtrueemtrue }
}); 
Cufon('h1', {
    
color'-linear-gradient(red, blue)',
    
hover: {
        
textShadow'2px 2px red',
        
color'-linear-gradient(black, white)'
    
}
}); 

سایه دهی

Cufon.replace('h1', {
                
textShadow'#fff -1px -1px, #333 1px 1px'
}); 

اجرای اجباری Cufon

<script type="text/javascript"Cufon.now(); </script> 

استفاده از چند فونت

        <script type="text/javascript">
                        
Cufon.replace('h1', { fontFamily'Vegur' });
            
Cufon.replace('h2', { fontFamily'Myriad Pro' });
        
</script> 

در صورت سوال و یا هرگونه مطلبی،در همین تاپیک مطرح کنید

منبع : آی کلاسیک
نویسنده :

X
پلاگین Extra Security Question (ساخت پرسش امنیتی)
با سلام [img]http://iranian-web.ir/images/paperclip.gif[/img][color=red][b]پلاگین[/b][/color]: E ...
تعیین نشده
دیدگاه های کاربران 0

برای عضویت در کانال تلگرامی
[همیار مای بی بی]
کلیک کنید
دریافت آخرین اخبار ، کدهای تخفیف و جوایز
برای اطلاع از آخرین اخبار مای بی بی فارسی عضو کانال تلگرامی شوید :