ฟอนต์ดูดีมีถมไป เอามาใส่ในเว็บซะเลย

โดย

embed-font-for-web

มีหลายคำถามที่ถูกโพสต์ถามผ่านทางฟอรั่ม ว่าทำยังไงดีก๊ะ ให้ฟอนต์ที่โหลดไปนั้นสามารถแสดงผลผ่านหน้าเว็บได้อะก้ะ (ถ้าถามด้วยภาษาวิบัติเราก็จะตบกบาลไปหนึ่งฉาด) คำตอบเบื้องต้นที่ใช้อธิบายน้องที่พิมพ์ภาษาวิบัติเข้ามาถามก็คือ มันทำไม่ได้ครับ .. จริงๆ แล้วเรากั๊ก คือถ้าจะทำน่ะก็ทำได้ครับ มีหลากหลายวิธีเหลือเกินที่จะนำฟอนต์แปลกๆ ที่อยากให้มันแสดงผลผ่านเบราว์เซอร์ นำไปยัดใส่หน้าเว็บที่เราต้องการได้ เพราะตลอดระยะเวลาที่ผ่านมา ผู้พัฒนาเรื่องเทคโนโลยีการแสดงผลในอินเทอร์เน็ตก็ได้หาหลากหลายสารพันวิธีที่จะทำให้หน้าเว็บของเราสามารถแสดงผลเป็นฟอนต์หน้าตาประหลาดตามที่เราต้องการได้ ส่วนจะทำยังไงนั้น เอ้า ลองอ่านดู

วิธีที่นิยมแพร่หลายที่สุดก็คือ การใช้เทคโนโลยี sIFR ครับ
อธิบายหลักคร่าวๆ ของมันก็คือ แทนที่ตัวอักษรด้วยก้อนแฟลช (swf) หนึ่งก้อน ที่บรรจุฟอนต์ของเราเอาไว้เรียบร้อยแล้ว บวกกับ JavaScript ไปแสดงผลแทนที่ตัวอักษรเพียวๆ ก็จะได้ฟอนต์หน้าตาสะสวยตามที่ต้องการ ตัวอย่างเว็บที่ใช้เทคนิคนี้ก็คือ หนังสือพิมพ์ไทยรัฐ ครับ สวยใช่ไหมล่ะ :25:
ส่วนวิธีทำนั้น ในฟอรั่มก็มีการอธิบายไว้เรียบร้อยโดยคุณซาฟิเร่ ลองอ่านดูได้นะครับ หรือไม่ก็หาตัวอย่างและบทความเทคนิคอื่นๆ ที่เกี่ยวข้องกันได้ที่ แอนอร่อย จ้ะ

ส่วนอีกวิธีที่กำลังจะแพร่หลายเพราะมันเป็นมาตรฐานในปัจจุบันที่ได้รับการยอมรับเป็นที่เรียบร้อยแล้ว ก็คือการใช้ CSS3 Property ที่ชื่อ @font-face ควบคุมการแสดงผลครับ
ที่บอกว่ามันแค่ “กำลังจะ” แพร่หลาย ยังไม่ถึงกับแพร่หลายจริงๆ ซะทีเดียว นั่นก็เพราะยังมีเบราว์เซอร์เก่าแก่เจ้านึงที่ชาวบ้านร้านตลาดยังคงใช้กันมากที่สุด คือ IE6 ที่มันไม่รู้จักเทคโนโลยีมาตรฐานนี้ ในขณะที่ชาวบ้านชาวช่องเขารู้จักมักคุ้นกันหมดแล้ว :08: (ดังนั้นใครที่ยังใช้ IE6 อยุ่ก็เปลี่ยนไปใช้ยี่ห้ออื่น หรืออัปเกรดเป็นรุ่น 7 รุ่น 8 ซะนะครับ)

เอ้า แล้วมันทำยังไงล่ะ?

สำหรับคนทำเว็บ ก็กำหนดค่า CSS ดังนี้ครับ
@font-face {
font-family: iannnnnTKO;
src: url(http://www.yourweb.com/fontfolder/iannnnnTKO.ttf);
}

เวลาเรียกใช้ก็

p { font-family: iannnnnTKO; }

เท่านี้เองครับ ง้ายง่ายใช่ไหม แต่ย้ำอีกทีว่ามันเปิดใน IE6 ไม่ได้นะ :41: ถ้าอยากใช้ต้องเพิ่มเทคนิคอื่นคือใช้ฟอนต์แบบ .eot ซึ่งเป็นวิธีแก้ปัญหาแบบถูลู่ถูกังไปก่อน (หากูเกิ้ลอ่านเอาเองเด้อ)

และสุดท้ายนี้ขอฝากบล็อกอีกแห่งที่แนะนำของดี เป็นฟอนต์ฝรั่ง 21 ตัว ที่หน้าตาดูดี เหมาะสำหรับการนำมาใช้ทำพาดหัวในเว็บจ้ะ จิ้มไปดูเลยที่ 21 Awesome @font-face Embeddable Typefaces | Spyre Studios

22 Sep 2009