ก่อนหน้านี้เรามีบทความสองบทความในห้องสอนฟ๐นต์
ขุดหลุมฝังฟอนต์
http://www.f0nt.com/forum/index.php/topic,4902.0.html
How to sIFR?
http://www.f0nt.com/forum/index.php/topic,5898.0.html
อันหลังเป็นเรื่องของการยัดฟอนต์ลงในแฟลชก้อนนึง
แล้วก็เรียกลงไปแสดงผลในเบราว์เซอร์
ซึ่งเป็นไปได้มากกว่าการใช้เทคโนโลยีที่ IE เคยทำ .eot เอาไว้เมื่อหลายเพลาก่อน (แต่เจ้าอื่นไม่เล่นด้วย)
วันนี้เรามี CSS3 ซึ่งเป็นมาตรฐานที่พัฒนาขึ้นเป็นกลางให้เบราว์เซอร์ต้องวิ่งตาม
ซึ่งเบราว์เซอร์ที่ตามทันแล้วในขณะนี้คือ
- Internet Explorer 8
- Safari 3.1
อ้าว อ้าว แล้ว.. แล้วอีกยี่ห้อสองยี่ห้อล่ะ :08:
เขาบอกว่ากำลังพยายามอยู่ครับ แต่น่าจะเป็นที่แน่นอนแล้วว่า
ในอนาคตเราจะได้เห็นฟอนต์หลากหลายประเภทปรากฏตัวให้ชมในเว็บแล้วล่ะ
กว่าคนไทยจะเปลี่ยนไปใช้ IE8 จนเป็นมาตรฐาน ก็อีกสัก 3-4 ปี
ถ้าหมาย่างรองรับมาตรฐานนี้ก็รออีกสักปีกว่าคนจะอัปเดตไปใช้ทั้งหมด
ส่วนทางฝั่งแมคไม่มีปัญหา เพราะเขาออโต้อัปเดตตามกันเป็นที่เรียบร้อย
แล้ววิธีใช้สำหรับคนเขียนเว็บล่ะ จะต้องทำยังไงบ้าง?
ตามไปอ่านในลิงก์ข้างล่างกันเอาเองครับ
โดยหลักการคร่าวๆ ก็คือ
- อัปโหลดฟอนต์ขึ้นไปที่ path ที่ต้องการ
- เสร็จแล้วระบุตำแหน่งและชื่อฟอนต์ ตั้งชื่อให้กับ css tag นั่นแล
- เขียน css tag อะไรสักอย่าง (เช่น div) ครอบจุดที่ต้องการกำหนดฟอนต์เอาไว้
เสร็จแล้วครับ
ขอบคุณแหล่งความรู้
- CSS3: Web Font (http://n-blue.nblogz.net/css3-web-font/) จาก n-blue (มีวิธีทำเป็นภาษาไทยด้วย)
- http://www.w3.org/TR/2002/WD-css3-webfonts-20020802/#font-descriptions อันนี้เว็บอย่างเป็นทางการ อธิบายละเอียดเลยนะ
- http://www.fonts.info/info/press/free-fonts-for-font-face-embedding.htm อันนี้มีตัวอย่างให้ดูครับ ใช้ได้เลยนะ
:37:>
(ขุด)
นอกจาก sIFR แล้ว
ยังมีเทคโนโลยีอีกตัวที่เอาไว้ดึงภาพของฟอนต์ มาแสดงแทนตัวอักษรด้วยนะครับ
เช่นเราตั้งค่าไว้ว่าให้ <h1> เป็นฟอนต์นี้ๆ แล้วก็ใช้เจ้า "FLIR (http://facelift.mawhorter.net/download/)" นี่มาช่วย
ก็จะเปลี่ยนเป็นภาพไปเลย โดยใช้ GD Library ในเซิฟเวอร์เป็นตัวที่เปลี่ยนจากตัวอักษรเป็นภาพให้
http://nettuts.com/javascript-ajax/how-to-use-any-font-you-wish-with-flir/
อ่านวิธีการและดูตัวอย่างได้ที่นี่จ้ะ
(ยังไม่เคยลองนะ ใครลองแล้วบอกด้วย)
- ขุด -
เมื่อเร็วๆนี้ FontLab ออกผลิตภัณฑ์ใหม่ ชื่อว่่า Photofont WebReady
ใช้เทคนิค sIFR ในการฝังนี่แหละ แต่เนื่องจากมันเป็นโปรแกรมสำเร็จรูป
ดังนั้นน่าจะช่วยลดขั้นตอนยุ่งยากได้เยอะ
ยังไม่ได้ลองเหมือนกันครับ ใครมีเวลาก็ลองดูครับ
อยากรู้ว่าพอเอามาใช้กับภาษาไทยจะมีปัญหารึเปล่า
http://www.fontlab.com/photofont/webready/ (http://www.fontlab.com/photofont/webready/)
http://www.photofont.com/ (http://www.photofont.com/)
ขอบคุณค่า :25:
อ้างคำพูดจาก: นายแอน เมื่อ 11 ส.ค. 2008, 21:22 น.
(ขุด)
นอกจาก sIFR แล้ว
ยังมีเทคโนโลยีอีกตัวที่เอาไว้ดึงภาพของฟอนต์ มาแสดงแทนตัวอักษรด้วยนะครับ
เช่นเราตั้งค่าไว้ว่าให้ <h1> เป็นฟอนต์นี้ๆ แล้วก็ใช้เจ้า "FLIR (http://facelift.mawhorter.net/download/)" นี่มาช่วย
ก็จะเปลี่ยนเป็นภาพไปเลย โดยใช้ GD Library ในเซิฟเวอร์เป็นตัวที่เปลี่ยนจากตัวอักษรเป็นภาพให้
http://nettuts.com/javascript-ajax/how-to-use-any-font-you-wish-with-flir/ (http://nettuts.com/javascript-ajax/how-to-use-any-font-you-wish-with-flir/)
อ่านวิธีการและดูตัวอย่างได้ที่นี่จ้ะ
(ยังไม่เคยลองนะ ใครลองแล้วบอกด้วย)
โอ้ว... อันนี้เจ๋ง :12:
อ้างคำพูดจาก: ooooo [19] เมื่อ 12 ธ.ค. 2008, 04:01 น.
- ขุด -
เมื่อเร็วๆนี้ FontLab ออกผลิตภัณฑ์ใหม่ ชื่อว่่า Photofont WebReady
ใช้เทคนิค sIFR ในการฝังนี่แหละ แต่เนื่องจากมันเป็นโปรแกรมสำเร็จรูป
ดังนั้นน่าจะช่วยลดขั้นตอนยุ่งยากได้เยอะ
ยังไม่ได้ลองเหมือนกันครับ ใครมีเวลาก็ลองดูครับ
อยากรู้ว่าพอเอามาใช้กับภาษาไทยจะมีปัญหารึเปล่า
http://www.fontlab.com/photofont/webready/ (http://www.fontlab.com/photofont/webready/)
http://www.photofont.com/ (http://www.photofont.com/)
ปัญหาน่ะมีแหงๆ เลยครับ :05:
บทความ Fonts and the Web
http://www.webdesignerwall.com/general/fonts-and-the-web/#more-201 (http://www.webdesignerwall.com/general/fonts-and-the-web/#more-201)
- Image Replacement
- Fahrner Image Replacement (FIR)
- (Scalable) Inman Flash Replacement (sIFR)
- Facelift Image Replacement (FLIR)
- The Future of Web Fonts: CSS3