6 ธันวาคม 2554

ใช้ font ตามใจคุณ (สำหรับนักพัฒนาเว็บ)

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://www.select2web.com/jquery/font-on-web-by-cufon.html
http://www.select2web.com

ไม่มีความคิดเห็น: