itshee

ก่อนหน้านี้เคยเกริ่นเรื่อง sIFR ไปแล้วในเรื่อง ทำเว็บอย่างไรให้ดูเก่า+โบ คราวนี้มาดูว่า sIFR ทำอะไรได้บ้าง

sIFR ย่อจาก Scalable Inman Flash Replacement เป็นการใช้แฟลชมาเป็นตัวช่วยในการแสดงผลฟอนต์ที่เรามี ผ่านทางหน้าเว็บ แทนที่วิธีเก่าที่ใช้ในการสร้างตัวอักษรในโฟโต้ชอปด้วยฟอนต์สวยๆ แล้วเซฟ แล้วมาแปะในเว็บเป็น jpg หรือ png โดยวิธีนี้จะสะดวกตรงที่ ข้อความสามารถเปลี่ยนแปลงได้ง่าย และใช้ เจควีรี (jQuery) มาช่วย ตัวอย่างเช่น

ฟอนต์ที่นำมาทดลองได้แก่ iannnnnvcd lightของคุณไอ้แอนนนนน (โดยฟอนต์นี้มีภาษาไทย) The Easiest Way to Make a Font (yet!) ของมาสเตอร์แชมป์ และ Kengkadeng Font (Font ทำเอง) (ของแพนด้าญี่ปุ่น)

โดยวิธีนี้นำเจควีรี มาช่วยเล็กน้อยโดยวิธีการทำก็ไม่ยากอย่างที่คิด โดยแบ่งเป็น (1) สร้างไฟล์ swf สำหรับเก็บฟอนต์ (2) หาที่เก็บไฟล์ และ (3) นำโค้ดมาแปะลงในบล็อก

1. สร้างไฟล์ swf ก็โหลดไฟล์ fla จากลิงก์ด้านล่างตรง sIFR Flash Font Source แล้วจะได้ไฟล์ fla มา เราก็เปิดในโปรแกรมแฟลช เสร็จแล้วเปิดมาก็จะเจอหน้าขาวๆ ว่างๆ ก็ไม่ต้องสนใจ ดับเบิลคลิกไปแล้วเลือกเปลี่ยนเป็นฟอนต์ที่เราต้องการ เสร็จแล้วก็เซฟมาเป็นไฟล์ swf ถ้าอยากได้หลายฟอนต์ก็ทำหลายที
2. หาที่โหลดเก็บไฟล์ พร้อมเรียกใช้งาน (อันนี้ผมเก็บในเซิร์ฟเวอร์เดิม)
3. นำโค้ดมาแปะลงในบล็อกเรา โดยจะมีโค้ดของเจควีรีหลักๆ สามตัวคือ jquery.js, jquery.flash, และ jquery.sifr ก็ลิงก์มาหมด เสร็จแล้วก็ปรับแต่งตัวแปรนิดหน่อยตามต้องการ แล้วก็เรียกใช้เจควีรี กับตำแหน่งที่เราต้องการ

ขนาดไฟล์นั้นถ้าเทียบกับไฟล์ jpg/png ก็ถือว่าไม่ต่างกันมากครับ ไฟล์โค้ดจะประมาณ 62 kb (รุ่น min)ไฟล์ฟอนต์ตัวนึงจะตกประมาณ 10 kb (รวมภาษาไทยด้วยก็ 30 kb) ถ้าเราใช้หลายครั้ง ขนาดไฟล์ก็เท่าเดิม ต่างกับเซฟเป็นภาพ ใครสนใจรายละเอียดเพิ่มเติมลองแวะดูได้ที่ นำฟอนต์ลงทั้งเอนทรีด้วย jQuery + sIFR (ภาคต่อ) หรือ http://jquery.thewikies.com/sifr/