ขุดหลุมฝังฟอนต์ในเว็บ!

[iannnnn]

ก่อนหน้านี้เรามีบทความสองบทความในห้องสอนฟ๐นต์

ขุดหลุมฝังฟอนต์
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

อ้าว อ้าว แล้ว.. แล้วอีกยี่ห้อสองยี่ห้อล่ะ
เขาบอกว่ากำลังพยายามอยู่ครับ แต่น่าจะเป็นที่แน่นอนแล้วว่า
ในอนาคตเราจะได้เห็นฟอนต์หลากหลายประเภทปรากฏตัวให้ชมในเว็บแล้วล่ะ

กว่าคนไทยจะเปลี่ยนไปใช้ IE8 จนเป็นมาตรฐาน ก็อีกสัก 3-4 ปี
ถ้าหมาย่างรองรับมาตรฐานนี้ก็รออีกสักปีกว่าคนจะอัปเดตไปใช้ทั้งหมด
ส่วนทางฝั่งแมคไม่มีปัญหา เพราะเขาออโต้อัปเดตตามกันเป็นที่เรียบร้อย




แล้ววิธีใช้สำหรับคนเขียนเว็บล่ะ จะต้องทำยังไงบ้าง?
ตามไปอ่านในลิงก์ข้างล่างกันเอาเองครับ
โดยหลักการคร่าวๆ ก็คือ
- อัปโหลดฟอนต์ขึ้นไปที่ path ที่ต้องการ
- เสร็จแล้วระบุตำแหน่งและชื่อฟอนต์ ตั้งชื่อให้กับ css tag นั่นแล
- เขียน css tag อะไรสักอย่าง (เช่น div) ครอบจุดที่ต้องการกำหนดฟอนต์เอาไว้


เสร็จแล้วครับ

ขอบคุณแหล่งความรู้
- 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 อันนี้มีตัวอย่างให้ดูครับ ใช้ได้เลยนะ




>

[iannnnn]

(ขุด)



นอกจาก sIFR แล้ว
ยังมีเทคโนโลยีอีกตัวที่เอาไว้ดึงภาพของฟอนต์ มาแสดงแทนตัวอักษรด้วยนะครับ
เช่นเราตั้งค่าไว้ว่าให้ <h1> เป็นฟอนต์นี้ๆ แล้วก็ใช้เจ้า "FLIR" นี่มาช่วย


ก็จะเปลี่ยนเป็นภาพไปเลย โดยใช้ GD Library ในเซิฟเวอร์เป็นตัวที่เปลี่ยนจากตัวอักษรเป็นภาพให้


http://nettuts.com/javascript-ajax/how-to-use-any-font-you-wish-with-flir/
อ่านวิธีการและดูตัวอย่างได้ที่นี่จ้ะ

(ยังไม่เคยลองนะ ใครลองแล้วบอกด้วย)

[ooooo]

- ขุด -

เมื่อเร็วๆนี้ FontLab ออกผลิตภัณฑ์ใหม่ ชื่อว่่า Photofont WebReady
ใช้เทคนิค sIFR ในการฝังนี่แหละ แต่เนื่องจากมันเป็นโปรแกรมสำเร็จรูป
ดังนั้นน่าจะช่วยลดขั้นตอนยุ่งยากได้เยอะ

ยังไม่ได้ลองเหมือนกันครับ ใครมีเวลาก็ลองดูครับ
อยากรู้ว่าพอเอามาใช้กับภาษาไทยจะมีปัญหารึเปล่า
http://www.fontlab.com/photofont/webready/
http://www.photofont.com/

[ป้าแป้งกึ่งสำเร็จรูป]

ขอบคุณค่า 

[JΛNΣ]

(ขุด)



นอกจาก sIFR แล้ว
ยังมีเทคโนโลยีอีกตัวที่เอาไว้ดึงภาพของฟอนต์ มาแสดงแทนตัวอักษรด้วยนะครับ
เช่นเราตั้งค่าไว้ว่าให้ <h1> เป็นฟอนต์นี้ๆ แล้วก็ใช้เจ้า "FLIR" นี่มาช่วย


ก็จะเปลี่ยนเป็นภาพไปเลย โดยใช้ GD Library ในเซิฟเวอร์เป็นตัวที่เปลี่ยนจากตัวอักษรเป็นภาพให้


http://nettuts.com/javascript-ajax/how-to-use-any-font-you-wish-with-flir/
อ่านวิธีการและดูตัวอย่างได้ที่นี่จ้ะ

(ยังไม่เคยลองนะ ใครลองแล้วบอกด้วย)

โอ้ว... อันนี้เจ๋ง 

[iannnnn]

- ขุด -

เมื่อเร็วๆนี้ FontLab ออกผลิตภัณฑ์ใหม่ ชื่อว่่า Photofont WebReady
ใช้เทคนิค sIFR ในการฝังนี่แหละ แต่เนื่องจากมันเป็นโปรแกรมสำเร็จรูป
ดังนั้นน่าจะช่วยลดขั้นตอนยุ่งยากได้เยอะ

ยังไม่ได้ลองเหมือนกันครับ ใครมีเวลาก็ลองดูครับ
อยากรู้ว่าพอเอามาใช้กับภาษาไทยจะมีปัญหารึเปล่า
http://www.fontlab.com/photofont/webready/
http://www.photofont.com/

ปัญหาน่ะมีแหงๆ เลยครับ

[iannnnn]

บทความ Fonts and the Web
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