sIFR หรือ Scalable Inman Flash Replacement เป็น script ที่ใช้ในการเปลี่ยนตัวอักษรธรรมดาๆในเ็ว็บของเราให้สวยงามขึ้นกว่าเดิม ด้วยการใช้ javascript, flash และ css พูดง่ายๆก็คือทำให้เราสามารถใช้ font สวยๆในเว็บ f0nt.com ของคุณ iannnnn ได้ในเว็บเรา

ทำได้อย่างไร!!!

1. เราต้องสร้างไฟล์ swf สำหรับเก็บ font ที่เราต้องการไว้ภายใน server ของเราก่อนครับ

2. เมื่อ page ของเราทำการโหลด javascript จะดึงเอา font ที่เราเพิ่งสร้างไว้ในข้อ 1. มาแสดงแทนที่ font เก่า (ซึ่งเราจะกำหนดด้วย id, class หรืออะไรก็ตามแต่)

วิธีทำ

1. ก่อนอื่นต้อง download ตัว script จาก Download the official sIFR 2.0.2 release

2. เมื่อโหลดมาแล้วก็จะมีไฟล์มากมาย ซึ่งไฟล์ที่น่าสนใจคือ sifr.fla เอาไว้สร้างไฟล์เก็บ font ครับ
สร้าง font :
เข้าไปแก้ไขไฟล์ sifr.fla ในนั้นจะมี layer อยู่ 2 อัน คือ action(อย่าไปยุ่งกะมัน), textbox(movieclip)
double click textbox มันจะเข้าไปหน้าแก้ไขตัว movie clip “textbox” ซึ่งจะเป็น obj แบบ textbox ใน property ของมันจะมีแถบให้เราเลือกประเภทของ font
เมื่อเลือก font ได้ตามต้องการแล้ว ก็ export ไปเป็นไฟล์ font-name.swf เพื่อที่จะเอาไปใช้

3. ในไฟล์ html ดึง script ของ sIFR มาmeทำงาน
<script src=”sifr.js” type=”text/javascript”></script>

4. สร้าง javascript เพื่อสั่งให้ sIFR ทำงาน

if(typeof sIFR == “function”){ //ตรวจสอบว่า sIFR ทำงานจริงหรือไม่
sIFR.replaceElement(named({
sSelector:”body h1″, // ส่วนที่ต้องการให้เปลี่ยน font เรียกด้วย css selector
sFlashSrc:”vandenkeere.swf”, // font ที่เราเพิ่งสร้าง
sColor:”#000000″,
sLinkColor:”#000000″,
sBgColor:”#FFFFFF”,
sHoverColor:”#CCCCCC”,
nPaddingTop:20,
nPaddingBottom:20,
sFlashVars:”textalign=center&offsetTop=6″
}));
}

ผลเป็นอย่างไรต้องลองครับ

download sIFR (Download the official sIFR 2.0.2 release)
example (sIFR 2.0.2 example page)