ยินดีต้อนรับ กรุณา สมัครสมาชิก หรือเข้าสู่ระบบ

Home » webboard » เครื่องมือในการทำเวบไซต์
เข้าชม : 1122

ใช้ font บนเว็บไซต์ตามใจ ด้วย Cufon

โพสต์เมื่อ: วันพฤหัสบดี 28 เมษายน 2554  01:23 น.

การออกแบบเว็บไซต์ในปัจจุบันมีความหลากหลายมาก ทั้งในส่วนของดีไซน์ การจัดวางเลย์เอาต์ การให้สี การใช้ภาพประกอบ การใช้ฟ้อนท์ที่หลากหลาย

ส่วนอื่นๆ อาจไม่มีปัญหามากนัก ในแง่ของการนำไปใช้จริงบนเว็บไซต์ ยกเว้นในส่วนของการใช้ฟ้อนท์ที่หลากหลาย

เป็นที่ทราบว่าบนอินเทอร์เนตนั้น หากขึนไปใช้ฟ้อนท์แปลกๆ นอกจาก Tahoma หรือ Ms sans-serif อาจทำให้การแสดงผลเป็นภาษาต่างดาวแทน อาจมีการใช้ฟ้อนท์แปลกๆ เฉพาะหัวข้อใหญ่ หรือโลโก้ โดยเลี่ยงไปใช้เป็นภาพแทนตัวหนังสือ วันนี้ขอเสนอการแก้ปัญหาเรื่อง font บนเว็บด้วย Cufon

Cufon สามารถบันดาลให้เว็บไซต์ของคุณมี font แปลกๆ ตามใจคุณได้ แต่ขอแนะนำว่า ให้ใช้เฉพาะฟ้อนท์แปลกๆที่หัวข้อที่สำคัญๆเท่านั้น หากใช้ทั้งเว็บ อาจส่งผลให้เว็บคุณช้าได้ เพราะ Cufón จะแปลงตัวหนังสือของคุณให้เป็นไฟล์ภาพ .png

วิธีทำ มีเพียง 4 ขั้นตอนง่า่ยๆ เท่านั้น ดังนี้
1. ดาวน์โหลดไฟล์ Cufon.yui.js
2. เอาฟ้อนท์ที่คุณอยากใช้ไปแปลงก่อน ที่ http://cufon.shoqolate.com/generate/ จะได้ไฟล์ .js มาตัวหนึ่ง
3. เรียกใช้ไฟล์ .js ทั้ง 2 ตัวมายังเพจที่จะใช้งาน
4. ระบุ elements ที่ต้องการใช้ฟ้อนท์แปลก ตามตัวอย่างด้านล่าง

ส่วน head


 

<script src="script/cufon-yui.js" type="text/javascript"></script> <script src="script/penthai_900-penthai_700-penthai_italic_900-penthai_italic_700.font.js" type="text/javascript"></script> <script type="text/javascript"> Cufon.replace('h1,h2');   </script> <style type="text/css"> h1 { font-size:60px; color: #2A2A2A ; text-align:center} h1 span { color: #A0A0A4} h2 { font-size:42px; text-align:center; } </style>
ส่วน body
 
<h1>คำสั่ง <span>WordPress</span> เบื้องต้น</h1> <h2>บทที่ 1 sidebar</h2>
ตามตัวอย่าง เมื่อไรก็ตามที่เราเรียกใช้คำสั่ง h1 และ h2 มันจะเปลี่ยนเป็นฟ้อนท์ที่เราต้องการทันที และหากใช้คำสั่ง span ใน h1 จะมีสีตามที่เราระบุไว้

ที่มา : http://wiki.github.com/sorccu/cufon/usage
ที่มา :http://www.select2web.com/jquery/font-on-web-by-cufon.html
 
Cufon


คุณต้องสมัครสมาชิก ถึงจะโพสกระทู้ได้

ปิดรับสมัครสมาชิกแล้ว


คำยอดฮิต :- 0