ใส่ฟอนต์ลงในเว็บไซต์ด้วย CSS3

เคยมีปัญหาแบบนี้กันหรือป่าวครับ อยากใช้ฟอนต์เท่ๆ มาทำเว็บ แต่จะใส่เป็น font-family ก็ไม่ได้ เพราะเครื่อง Client ทั่วไปจะไม่มีฟอนต์ของเราเป็นแน่ สุดท้ายเลยไปลงเอยที่ทำเป็นรูป น่าเศร้ายิ่งนักครับ

ไม่กี่เดือนก่อน ผมเปิดไปเจอเว็บนายกครับ pm.go.th เค้ามีฟอนต์สวยเด่นเป็นชื่อหัวข้อตัวใหญ่ๆ เลย อันนี้เค้าใช้ flash ทำครับ โดยส่งข้อความผ่าน parameter เข้าไปครับ อันนี้ไม่รู้ว่าตัว flash มันจะทำยากป่าวนะ แต่การนำไปใช้งานนี้ก็สะดวกดี แต่ต้องเขียนเป็น function php สำหรับสร้างโค๊ด <embed /> ไปเลยถึงจะสะดวกที่สุด

แต่! ผมไม่ชอบ flash อ้ะ ด้วยเหตุผลส่วนตัว…

สุดท้ายมาทราบเทคโนโลยีใหม่ของ CSS3 โห อันนี้มันยิ่งแจ่มกว่าเทคนิคแฟลชอีกครับ ลองดูกันดิว่ามันง่ายดายขนาดไหน

/* กำหนดที่อยู่ของ font-family ใหม่ของคุณ */
@font-face {
font-family: iannnnnTKO;
src: url(http://www.yourweb.com/fontfolder/iannnnnTKO.ttf);
}
/* สามารถเรียกใช้ font-family ที่กำหนดขึ้นมาใหม่ได้แล้วคร้าบ */
body { font-family: iannnnnTKO; }

*** แต่ก็แน่นอนว่า “IE6 ไม่รองรับ” นะคร้าบ

Posted in CSS