ฟอนต์ดูดีมีถมไป เอามาใส่ในเว็บซะเลย

embed-font-for-web

มีหลายคำถามที่ถูกโพสต์ถามผ่านทางฟอรั่ม ว่าทำยังไงดีก๊ะ ให้ฟอนต์ที่โหลดไปนั้นสามารถแสดงผลผ่านหน้าเว็บได้อะก้ะ (ถ้าถามด้วยภาษาวิบัติเราก็จะตบกบาลไปหนึ่งฉาด) คำตอบเบื้องต้นที่ใช้อธิบายน้องที่พิมพ์ภาษาวิบัติเข้ามาถามก็คือ มันทำไม่ได้ครับ .. จริงๆ แล้วเรากั๊ก คือถ้าจะทำน่ะก็ทำได้ครับ มีหลากหลายวิธีเหลือเกินที่จะนำฟอนต์แปลกๆ ที่อยากให้มันแสดงผลผ่านเบราว์เซอร์ นำไปยัดใส่หน้าเว็บที่เราต้องการได้ เพราะตลอดระยะเวลาที่ผ่านมา ผู้พัฒนาเรื่องเทคโนโลยีการแสดงผลในอินเทอร์เน็ตก็ได้หาหลากหลายสารพันวิธีที่จะทำให้หน้าเว็บของเราสามารถแสดงผลเป็นฟอนต์หน้าตาประหลาดตามที่เราต้องการได้ ส่วนจะทำยังไงนั้น เอ้า ลองอ่านดู

วิธีที่นิยมแพร่หลายที่สุดก็คือ การใช้เทคโนโลยี sIFR ครับ
อธิบายหลักคร่าวๆ ของมันก็คือ แทนที่ตัวอักษรด้วยก้อนแฟลช (swf) หนึ่งก้อน ที่บรรจุฟอนต์ของเราเอาไว้เรียบร้อยแล้ว บวกกับ JavaScript ไปแสดงผลแทนที่ตัวอักษรเพียวๆ ก็จะได้ฟอนต์หน้าตาสะสวยตามที่ต้องการ ตัวอย่างเว็บที่ใช้เทคนิคนี้ก็คือ หนังสือพิมพ์ไทยรัฐ ครับ สวยใช่ไหมล่ะ :25:
ส่วนวิธีทำนั้น ในฟอรั่มก็มีการอธิบายไว้เรียบร้อยโดยคุณซาฟิเร่ ลองอ่านดูได้นะครับ หรือไม่ก็หาตัวอย่างและบทความเทคนิคอื่นๆ ที่เกี่ยวข้องกันได้ที่ แอนอร่อย จ้ะ

ส่วนอีกวิธีที่กำลังจะแพร่หลายเพราะมันเป็นมาตรฐานในปัจจุบันที่ได้รับการยอมรับเป็นที่เรียบร้อยแล้ว ก็คือการใช้ CSS3 Property ที่ชื่อ @font-face ควบคุมการแสดงผลครับ
ที่บอกว่ามันแค่ “กำลังจะ” แพร่หลาย ยังไม่ถึงกับแพร่หลายจริงๆ ซะทีเดียว นั่นก็เพราะยังมีเบราว์เซอร์เก่าแก่เจ้านึงที่ชาวบ้านร้านตลาดยังคงใช้กันมากที่สุด คือ IE6 ที่มันไม่รู้จักเทคโนโลยีมาตรฐานนี้ ในขณะที่ชาวบ้านชาวช่องเขารู้จักมักคุ้นกันหมดแล้ว :08: (ดังนั้นใครที่ยังใช้ IE6 อยุ่ก็เปลี่ยนไปใช้ยี่ห้ออื่น หรืออัปเกรดเป็นรุ่น 7 รุ่น 8 ซะนะครับ)

เอ้า แล้วมันทำยังไงล่ะ?

สำหรับคนทำเว็บ ก็กำหนดค่า CSS ดังนี้ครับ
@font-face {
font-family: iannnnnTKO;
src: url(http://www.yourweb.com/fontfolder/iannnnnTKO.ttf);
}

เวลาเรียกใช้ก็

p { font-family: iannnnnTKO; }

เท่านี้เองครับ ง้ายง่ายใช่ไหม แต่ย้ำอีกทีว่ามันเปิดใน IE6 ไม่ได้นะ :41: ถ้าอยากใช้ต้องเพิ่มเทคนิคอื่นคือใช้ฟอนต์แบบ .eot ซึ่งเป็นวิธีแก้ปัญหาแบบถูลู่ถูกังไปก่อน (หากูเกิ้ลอ่านเอาเองเด้อ)

และสุดท้ายนี้ขอฝากบล็อกอีกแห่งที่แนะนำของดี เป็นฟอนต์ฝรั่ง 21 ตัว ที่หน้าตาดูดี เหมาะสำหรับการนำมาใช้ทำพาดหัวในเว็บจ้ะ จิ้มไปดูเลยที่ 21 Awesome @font-face Embeddable Typefaces | Spyre Studios



เผื่อจะสนใจ ลองอ่านต่อนี่ดูไหมจ๊ะ

 
  • ปริญญ์ มงคลพรรณ

    โอ้วเดี๋ยวนี้เรียนออกแบบไม่พอต้องเรียนเขียนเว็บเพิ่มด้วยแล้ว
    ขอบคุณมากๆ นะครับ สำหรับบทความดีๆ

  • kob

    ทดลองแล้ว @font-face ยังไม่สำเร็จครับ
    เป็น css3 ใช่ไหมครับ?
    แล้ว ff, chrome ซัพพอร์ท แล้วหรือครับ?

    • http://intensedebate.com/people/iannnnn iannnnn

      ใช่ครับ เป็น CSS3
      เบราว์เซอร์ที่รองรับก็คือ Firefox 3.1+, Safari 3+, Opera 10+
      ส่วน Chrome ไม่รองรับจ้ะ

      • kob

        ขอบพระทัย พะยะค่ะ

        จะไปลองใหม่อีกที แคร๊บ

  • cake

    - @font-face ถ้าดูใน IE6 จะเห็นข้อความเป็น font ธรรมดา หรือไม่เห็นข้อความเลยครับ

    - sIFR ถ้าเครื่องนั้นไม่มี flash จะประกฏเป็น font ธรรมดา หรือไม่เห็นข้อความ ครับ

  • cake

    แล้ว font ที่ทำด้วย sIFR ฟอนต์นี้มีชื่อว่าอะไรครับ
    แล้วโหลดจากที่ไหน อยากได้ฟอนตืนี้ครับ

  • maheyuan

    อยากทราบว่ามี font ที่เหมือน paul smith ให้ download บ้างมั๊ยครับ หรือต้องสร้างขึ้นเอง อยากได้อ่ะครับ

  • cake

    แล้ว font ที่ทำด้วย sIFR ของเว็บ***ไทยรัฐ***มีชื่อว่าอะไรครับ
    แล้วโหลดจากที่ไหน อยากได้ฟอนตืนี้ครับ

  • Jack

    ชอบงานออกแบบมากเลย แบบฟร้อนสวยๆ ทั้งนั้นอย่างนี้ต้องเรียก กูรูด้านฟร้อนภาษาไทยแล้ว

  • http://www.akedesign.com รับออกแบบเว็บไซต์

    เสียดายที่บนโลกนี้ยังมี IE6 อยู่ – -" ยังไงต้องขอขอบคุณมากครับ

  • Pingback: links for 2010-03-18 | Blogmunk

  • http://www.facebook.com/profile.php?id=100001617650412 Ins Rayong

    ขอบคุณมากครับสำหรับบทความ ดีๆ

  • http://www.facebook.com/profile.php?id=100001617650412 Ins Rayong

    ขอบคุณมากครับสำหรับบทความดีๆ

  • http://www.facebook.com/people/IOat-Nurack/100000566403250 IOat Nurack

    CSS3 ใช้ Property ที่ชื่อ @font-face มีปัญหากับฟ้อนต์ไทยไหมครับ
    ผมลองใช้แล้ว IE ไม่ยอมแสดงผล แต่บราวเซอร์อื่นแสดงผลได้ งง!

  • Gingtalk

    บทความมีประโยชน์ครับ

  • http://www.facebook.com/ake9991 Akenarong Suksupakit

    ขอบคุณนะครับ