เปลี่ยน Font เน่าๆ ให้ดูสวยงามด้วย jQuery + sIFR
บทความนี้มันมีที่มาครับ เนื่องจาก วันก่อน เห็น K.Non และ K.Golf คุยกันใน Twitter ว่า “เว็บไซด์ thairath ใช้ sIFR ด้วย” ก็เลยทำให้เกิดความสงสัยครับ ว่า ไอ้ sIFR เนี่ย มันคืออะไรหว่า?
และก็ไม่รอช้า ถามพี่ Google ในทันที และก็ไม่ผิดหวัง สุดท้ายก็ได้คำตอบมาว่า
ไอ้ sIFR เนี่มันคือโปรเจคของ พี่ Mike Davidson ซึ่งมีหน้าที่คือ นำ Flash มาแทนที่ตัวอักษรภายใน Element ที่ระบุ โดยที่เราสามารถ ใช้ Font จากที่ไหนก็ได้
แล้วก็ลองทำดูได้หน้าตาออกมาแบบนี้ Online Demo (ลอง view Source ดูประกอบ)
หลักการของมันมีอยู่นิดเดียวเองครับ
1. ใช้ js ในการส่งค่า ระบุ พารามิเตอร์ให้กับ Flash รวมไปถึงการดึง text ภายใน element ที่ระบุ ส่งค่าให้กับ flash
2. Flash (swf) ทำการ Render กลับมา
แค่นี้เองครับ แต่ว่านอกจากนี้มันยังสามารถระบุ parameters ได้อีกจำนวนนึง เช่น สี font, สี link, ขนาด, padding, etc.
และที่สำคัญมัน support SEO เต็มตรีนเลย เพราะมันไม่ได้ embed มาทันที แต่อาศัยความสามารถของ js ในการ create object on the fly มา ฉะนั้น ก็ให้ Bot อ่าน Source Code เดิมๆ กันต่อไป
จากนั้นผมก็ลองเอามาเล่นพักนึง เห็นการเรียก element แบบนี้แล้วมันทำให้นึกถึง jQuery แฮะ เลยเดาเอาว่า ต้องมี เทพๆ เขียน plugin ให้กรู ใช้เป็นแน่แท้ และก็…..
มีจริงๆ ครับ jQuery sIFR Plugin
พอได้แบบนี้แล้วทำให้วิธีการใช้งานสะดวกมากขึ้นเลย ทีนี้เรามาเริ่มต้นใช้งานมันดูกัน
ก่อนอื่นก็ไปโหลด plugin ซึ่งจะประกอบไปด้วย 3 ไฟล์ ดังนี้
1. jQuery Sifr Plugin v1.5
มีหน้าที่ในการเขียน syntax js เอาไปติดต่อกับ flash ซึ่งถือเป็นหัวใจเลยครับ
2. jQuery
อันนี้ก็รู้ๆ กันอยู่ jQuery Core นั่นเอง
3. jQuery Flash Plugin v1.0.1
อันนี้จะถูกเรียกใช้ใน plugin อีกทีเพื่อทำการ embed flash โดยที่เราไม่ต้องมากังวลว่า มันจะต้องใช้ embed หรือ object ในการใช้งาน flash และความสามารถอื่นๆ
4. Fonts
อันนี้ผมเอาบางส่วนของชาวบ้านมาให้ใช้ทดสอบ
*** ขอขอบคุณ Font ภาษาไทย จาก f0nt.com ***
เริ่มต้นการใช้งานก็เรียกไฟล์ js แบบนี้ครับ
-
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
-
<script src="jquery.flash.min.js" type="text/javascript"></script>
-
<script src="jquery.sifr.min.js" type="text/javascript"></script>
ต่อจากนั้นเรียกใช้งาน plugin และทำการ define ของ element ที่จะถูกเปลี่ยนแปลงค่า
-
<script type="text/javascript">
-
$(document).ready(function(){
-
$.sifr({
-
path: ‘resources/’,
-
fontSize: 30,
-
color: ‘#FF3300′,
-
save: true
-
});
-
-
$(‘h1′).sifr({ font: ‘iannnnnvcdlight’ });
-
$(‘h2′).sifr({ font: ‘AvantGarde Md BT’ });
-
$(‘h3′).sifr({ font: ‘Medici Text’ });
-
});
-
</script>
ในที่นี้จุดที่สำคัญๆ ก็คือ
path: ‘resources/’ เป็นการระบุไปยังตำแหน่งจัดเก็บ fonts ของเรา
$(‘h1′).sifr({ font: ‘iannnnnvcdlight’ }); เป็นการเลือก font จาก folder path และระบุให้ element h1 ทั้งหมด ถูกเปลี่ยนค่า
สำหรับ parameters อื่นๆ ดูได้ ที่นี่ ครับ
HTML Code
-
<h1>Test ทดสอบระบบ สวัสดีครับ</h1>
text ทั้งหมดใน element h1 จะถูก แทนที่ด้วย flash พร้อมกับ font ที่เราระบุไป ลองดูตัวอย่างที่นี่ครับ
Online Demo
All source code and example available to download here
โอ้ว พระเจ้า มันยอดมากจริงๆ เลยใช่มั้ยล่ะครับ!!!
เพิ่มเติมอีกนิดครับ สำหรับวิธีการทำ Font ใช้งานเอง ผมไปเห็นบทความ ภาษาไทยของท่านนึง เขียนได้ดีแล้ว เลยขอนำมาอ้างอิง โดยไม่เขียนใหม่ ลองดูกันได้ที่ link ทางด้านล่างครับ
http://itshee.exteen.com/20090219/jquery-sifr
ไม่ก็ใช้วิธี Convert online เอา สำหรับคนที่ไม่มี โปรแกรม Flash
http://www.sifrgenerator.com/wizard.html
http://www.ianpurton.com/sifr/
ปัญหาที่พบ
1. ไม่สามารถตัดคำในภาษาไทยได้ ต้องอาศัยการเคาะวรรคเอง
2. วรรณยุกต์ลอย
Ps. ตอนนี้เค้าแก้ วรรณยุกต์ลอยกันได้แล้วนะเออ ลองไปหาคำตอบ ที่นี่ ครับ
You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
โอ้ …. พระเจ้ายอด มันจอร์จมาก
เจ๋งอ่ะ เพราะแค่เปลี่ยน font ดังนั้น text ยังอยู่ครบ bot ยังเก็บ text ได้ คนดูก็เห็น font สวยๆด้วย
เยี่ยมครับ
ดูดีมีชาติตระกูลมากมาย
ว้าววว โดนมากๆ คับ