หน้า: [1]
 
ผู้เขียน หัวข้อ: ขุดหลุมฝังฟอนต์ในเว็บ!  (อ่าน 10383 ครั้ง)
0 สมาชิก และ 1 ขาจร กำลังดูหัวข้อนี้
ก่อนหน้านี้เรามีบทความสองบทความในห้องสอนฟ๐นต์

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




 หมีโหด~>
บันทึกการเข้า

ทำมาหากินด้วยการเปิดร้านสกรีนเสื้อยืด จ้ะ
(ขุด)



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


ก็จะเปลี่ยนเป็นภาพไปเลย โดยใช้ 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.photofont.com/
บันทึกการเข้า
ขอบคุณค่า  กรี๊ดดดดด
บันทึกการเข้า

เราแก้ไขอดีตไม่ได้ แต่เราทำปัจจุบันให้ดีได้
(ขุด)



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


ก็จะเปลี่ยนเป็นภาพไปเลย โดยใช้ 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.photofont.com/

ปัญหาน่ะมีแหงๆ เลยครับ ฮือๆ~
บันทึกการเข้า

ทำมาหากินด้วยการเปิดร้านสกรีนเสื้อยืด จ้ะ
บทความ 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
บันทึกการเข้า

ทำมาหากินด้วยการเปิดร้านสกรีนเสื้อยืด จ้ะ
หน้า: [1]
 
 
Powered by MySQL Powered by PHP Powered by SMF 1.1.21 | SMF © 2006-2007, Simple Machines | Thai language by ThaiSMF Valid XHTML 1.0! Valid CSS!