วันอาทิตย์, มีนาคม 21, 2553

Dynamic text with style

วันก่อนพยายาม Hack งานออกแบบของเว็บ getdash.com ไปพบว่าเค้าใส่ effect แปลกๆ เข้าไปในตัวอักษร แถม font ยังไม่ใช่ font มาตรฐาน พอดูด้วย firebug ก็พบว่าเค้าใช้ cufon สำหรับสร้างตัวอักษร


ทดลองใช้ font little star จากเว็บ f0nt.com

บรรทัดแรกทดลองใส่เงาสีขาวบนตัวอักษร บรรทัดที่สองทดลองเรื่องสี และบรรทัดที่สามทดสอบภาษาไทย ส่วนเรื่องสระลอยทดสอบแล้วแต่ไม่ได้ capture มาให้ดู (ทดสอบสระลอย)

ทดลองกับ font supermaket จากเว็บ f0nt.com


การใช้งาน cufon เริ่มจากแปลง font ของเราเป็นไฟล์ java script ก่อน (*.font.js) ก่อน โดยเข้าไปที่เว็บ cufon.shoqolate.com เลือก upload ไฟล์ font ของเรา แล้วเลือก option ตามที่เราต้องการ

ขั้นที่สอง สั่งให้ script cufon แปลงข้อความของเราให้เป็น font ตามที่สร้างเอาไว้


  <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <script src="cufon-yui.js" type="text/javascript"></script>
 <script src="Little_Star_0506_400.font.js" type="text/javascript"></script>
 <script type="text/javascript">
   Cufon.replace('h1');
   Cufon.replace('h2',{hover:true, textShadow:'0 1px 1px #FFF'});
 </script>
 <style type="text/css">
            a {color:#990907; }
            a:hover { color:red; }
 </style>
  </head>
  <body style="background-color:#EEEEEE;">
    <h2>
      This text will be shown in
      <a href="#">Little star</a>.
    </h2>
    <h1 style="color:#999999">This text will be shown in Little Star.</h1>
    <h1>Test thai ทดสอบภาษาไทย ที่ เพี้ยน cufon</h1>
  </body>


cufon ทำออกมาได้ดีมากๆ แม้แต่การแปลงสีด้วย hover ก็สามารถทำได้ด้วย ถ้าสนใจรายละเอียดสามารถเข้าไปดูคู่มือได้ที่ cufon บน github
blog comments powered by Disqus