วิธีเอาฟอนท์มาใช้งานบนเว็บไซต์ ผ่าน @font-face

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

ชื่อฟอนท์ “TH SarabunPSK” เป็นฟอนท์จาก สำนักงานส่งเสริมอุตสาหกรรมซอฟต์แวร์แห่งชาติ(องค์การมหาชน) จากโครงการ 13 ฟอนท์แห่งชาติ ซึ่งเผยแพร่ และแจกฟรีให้ประชาชน และหน่วยงานต่างๆ ได้ใช้ ตามมติ ครม. (อ้างอิง: http://www.sipa.or.th/ewt_news.php?nid=481&filename=index)

แต่ปัญหาก็คือ ฟอนท์ TH SarabunPSK นั้น ไม่ได้รับการติดตั้งไว้ในเครื่องคอมพิวเตอร์โดยทั่วไป ทั้งในประเทศไทย และทั่วโลก ซึ่งหากมีคนเปิดเว็บไซต์ของเรา แล้วในเครื่องคอมพิวเตอร์ของเขาไม่มีฟอนท์นี้อยู่ ตัวโปรแกรม Web Browser จะเลือกฟอนท์มาตรฐานขึ้นมาใช้งานโดยอัตโนมัติ เช่น Arial หรือ Tahoma เป็นต้น

ทีนี้จะทำยังไงดีล่ะ ? เรามีวิธีการผนึกฟอนท์สวยๆ ของเราให้แสดงผลได้อย่างถูกต้อง และเหมือนกันไม่ว่าคุณจะเปิดเว็บไซต์จากที่ใดๆ ก็ตาม ดังนี้

ในช่วงก่อน มีวิธีการต่างๆ ที่จะใช้ฟอนท์สวยๆ แปลกๆ บนหน้าเว็บไซต์ได้ เช่น

  1. Static Image คือ วิธีกำปั้นทุบดิน โดยการใช้รูปภาพแทนข้อความนั้นๆ ตรงๆ เลยเช่น หัวข้อต่างๆ ซึ่งปัญหาที่เด่นชัดก็คือ แก้ไขลำบาก
  2. sIFR (Scalable Inman Flash Replacement) เป็นเทคนิคการเปลี่ยนฟอนท์ ให้เป็นไฟล์ Flash (.swf) ซึ่งฟอนท์ที่เราต้องการนั้น เราก็ไป embed ใส่ไว้ใน flash เลยแล้วค่อยส่ง parameter เข้าไปแก้ไขข้อความ แต่ต่อมาก็ไม่ค่อยนิยมกัน เพราะว่า ยุ่งยาก, ไม่สนับสนุนการทำงานของ SEO แล้วก็ flash เปิดบนอุปกรณ์ apple (mac, iphone, etc..) ไม่ได้
  3. Font Replacement to Canvas Image คือการแทนที่ตัวอักษรที่เราต้องการ ในแบบอักษรที่กำหนดไปเป็นไฟล์รูปภาพ โดยอาศัยการทำงานของ Javascript และเทคนิค Canvas บน HTML นั่นเอง ยกตัวอย่างไลบราลี่ (Library) ที่นิยมกันมากๆ ในยุคก่อนก็คือ Cufon
  4. Google Font API ด้วยปัญหาการใช้งานฟอนท์บนหน้าเว็บไซต์ Google เลยออก Javascript API ขึ้นมาเองเลย ซึ่งทำให้เราเรียกใช้งานฟอนท์สวยๆ ได้ง่ายขึ้น แต่ปัญหาก็มีอีกคือ ใช้งานแบบ offline ไม่ได้ รวมถึงฟอนท์ที่ Google มีมาให้นั้นไม่ครอบคลุม หรือไม่สนับสนุนในบางภาษาเป็นต้น
  5. @font-face เป็นวิธีล่าสุดในปัจจุบันซึ่งตอบสนองทุกความต้องการของการใช้งาน ไม่ว่าฟอนท์ใดๆ ก็ตาม ภาษาใดๆ ก็ตาม และยังยืดหยุ่นพอสมควรเลยทีเดียว

 

@font-face คืออะไร ?

@font-face คือ คำสั่งใหม่ที่ถูกเพิ่มเข้ามาในมาตรฐานใหม่ของ CSS3 ซึ่งทำให้เราสามารถเรียกใช้งานฟอนท์ต่างๆ ที่อยู่ในโฮสติ้งของเรา หรืออ้างอิงตาม url ก็ได้เช่นกัน ซึ่งมันก็มีหลักการเรียก การใช้งานอยู่เหมือนกันดังนี้

จากโค้ดด้านบน เป็นการประกาศให้ browser รู้ว่าต่อไปถ้ามีการเรียกใ้ช้งานฟอนท์ชื่อ TH SarabunPSK ก็ให้เรียกมาจาก path ที่เก็บไฟล์ TH_SarabunPSK.ttf ตลอด..

แล้วถ้าเราอยากใช้ฟอนท์สวยๆ หลายๆ ฟอนท์บนเว็บไซต์ของเราล่ะ ก็ง่ายๆครับ แค่ประกาศโค้ด @font-face เพิ่มเข้าไปเท่านั้นเอง แต่ข้อควรระวังนิดนึงก็คือ เมื่อเราใช้งานฟอนท์พิเศษเพิ่มมากขึ้นเท่าใด เวลาคนเข้าเว็บเราก็จะต้องมีอัตราการบริโภค Bandwidth เพิ่มมากขึ้นตามกันเช่นกัน อาจจะทำให้เว็บไซต์ของเราแบนด์วิธเต็ม หรือเกิดสภาวะ overload ในฝั่ง user ได้เช่นกัน.. ดังนั้น ฟอนท์สวยๆ ก็น่าจะเลือกใช้เท่าที่จำเป็นบนหน้าเว็บก็น่าจะพอต่อการใช้งานนะครับ ^_^

แต่ปัญหาเรื่องฟอนท์นั้น ยังไม่จบครับ เนื่องจากฟอนท์ประเภท ttf (TrueType Font) นั้น แม้ว่าจะเป็นที่นิยมใช้กันอย่างแพร่หลาย แต่ก็มีบางบราวเซอร์ไม่รองรับไฟล์ประเภทนี้ครับ ดังนั้นเลยต้องหาวิธีการทำให้มัน Cross Browser ให้ได้ ดังนี้ครับ

แรกเริ่มเดิมที web browser ที่รองรับ @font-face นั้นมีแต่ Internet Explorer (IE) เท่านั้นครับ แล้วไฟล์อักษรที่ IE รองรับก็มีแต่ .eot เท่านั้น

แต่ภายหลัง web browser ต่างๆ เล็งเห็นว่า feature นี้มีประโยชน์เลยผนวกมันเข้าไปทำให้มาตรฐานของการใช้ฟอนท์บนหน้าเว็บไซต์เปลี่ยนไป และเราเองก็ต้องเลือกใช้ฟอนท์ที่สนับสนุนให้ครบทุกความต้องการ ดังนี้

แต่ปัญหายังไม่จบง่ายๆครับ เนื่องจากเจ้า IE version 9 และรุ่นที่ต่ำกว่านั้น ยังไม่รองรับการเรียกใช้งาน url() ซ้อนกันหลายๆ ชั้น เลยทำให้โปรแกรมมันงง แล้วก็เอ๋อไปเลย แต่เราก็มีวิธีแก้ไขครับ โดยใส่เครื่องหมาย ? เข้าไป ….. แต่ว่าการใส่ ? เข้าไปไม่ได้หมายความว่าจะทำให้ IE รุ่นเก่าๆ สามารถรองรับการเรียกใช้งาน url() ซ้อนกันได้นะครับ เพียงแต่ทำให้โปรแกรมมันมองข้อความหลัง ? ว่าเป็นตัวแปรธรรมดา (Query String) เท่านั้น

แต่ปัญหาก็ยังไม่จบง่ายๆ อีกแล้ว (ทำไมปัญหาเยอะจัง ?) เนื่องจากถ้าเราเขียนโค้ดในลักษณะด้านบน โปรแกรม Web Browser มันก็จะดาวน์โหลดฟอนท์มาทั้งหมด แม้ว่าฟอนท์บางรูปแบบจะใช้งานไม่ได้บนบราวเซอร์นั้นๆ ก็ตาม จึงเป็นการสิ้นเปลืองแบนด์วิธไปโดยปริยาย ดังนั้น เราต้องเพิ่มโค้ดเข้าไป อธิบายให้บราวเซอร์รู้ว่า ควรจะโหลดฟอนท์แบบไหนมาใ้ช้งานให้เข้ากันได้กับโปรแกรมของตัวเองมากที่สุด นั่นคือ การใส่ “Format Hint” เข้าไปครับ

ตอนนี้โค้ดการใช้งาน @font-face ก็เกือบจะเจ๋ง แล้วล่ะครับ แต่ติดปัญหากับบราวเซอร์เทพอย่าง IE 9 เพราะเขาคิดค้นโหมด Compatibility View เพื่อช่วยเหลือในการดูเว็บไซต์ที่มีมาตรฐานเก่าๆ ได้ แต่ก็เลยทำให้เกิดสภาพเอ๋อ กับการเรียกฟอนท์ได้ครับ แต่ก็แก้ไขได้โดยการเขียนโค้ดแบบนี้

แต่ถ้าไม่อยากเพิ่มโค้ดในลักษณะด้านบน ก็เพิ่ม meta tag แบบนี้เข้าไปบนหัวเอกสารครับ

ส่วนไฟล์ฟอนท์ บางรูปแบบเช่น svg นั้น ส่วนใหญ่จะรองรับกับบราวเซอร์รุ่นเก่าๆ และยังมีบั๊กในส่วนแสดงผลอยู่

แล้วถ้าเรามีฟอนท์ ttf อยู่แล้วเราจะหาไฟล์ eot, woff หรือ svg ได้จากที่ไหนบ้างล่ะ ? มีคำตอบครับ แต่ต้องอาศัยเครื่องมือออนไลน์กันหน่อย ให้เขาช่วยเรา convert font

 

การแปลงฟอนท์ TTF ให้เป็น EOT และ WOFF และ SVG

ก่อนอื่น เข้าไปที่เว็บนี้ http://www.font2web.com/ หรือเว็บนี้ http://www.fontsquirrel.com/tools/webfont-generator ข้อสำคัญก็คือ ฟอนท์ที่เรามีอยู่ในมือนั้น ต้องถูกลิขสิทธิ์นะครับ บางเว็บเขาจะถามเราว่าฟอนท์ที่จะ convert เนี่ย ถูกลิขสิทธิ์รึป่าว ? หรือบางทีถ้าเป็นฟอนท์ที่ฮิตมากๆ เช่น Helvetica ซึ่งอยู่ในกลุ่ม protect list เขาก็จะไม่อนุญาตให้เรา convert ฟอนท์ครับ

พอเข้าไปที่เว็บเหล่านี้ เราก็ browse ไฟล์ฟอนท์ตามปกติ แล้วก็ submit จากนั้น เว็บจะทำการแปลงไฟล์ให้เรา รอสักพักเขาจะให้เราดาวน์โหลดไฟล์ฟอนท์ที่ convert เรียบร้อยแล้ว เราก็เอาไฟล์นั้นๆ ซึ่งจะมีอยู่ประมาณ 3-5 ไฟล์โดยประมาณ ไปใช้งานได้เลยครับ

บางเว็บเขาจะแถมตัวอย่างโค้ด CSS และ HTML มาให้เราดูด้วย ก็นับว่าเป็นตัวช่วยในการเขียนโค้ดไปได้ระดับนึง

สุดท้าย ก็ขอให้ทุกๆคน สนุกกับการใช้งาน และการเขียนเว็บไซต์กันนะครับ

7 Replies to “วิธีเอาฟอนท์มาใช้งานบนเว็บไซต์ ผ่าน @font-face”

  1. รบกวนหน่อยคะ ถ้าเป็นฟอนต์ THSarabunIT๙ มันไม่ให้ convert ไม่แน่ใจว่าทำไม มีแนวทางไหนบ้างค่ะที่จะนำฟอนต์นี้ไปใช้บนเวบได้ ขอบคุณล่วงหน้าค่ะ

    1. อืม ไม่แน่ใจนะครับ อย่างบางฟอนท์ที่ยอดนิยมเช่น Helvetica เขาจะมีลิขสิทธิ์ปกป้องอยู่ ทำให้บรรดาเว็บ convert webfont ไม่กล้าแปลงไฟล์ให้.. หรือฟอนท์นั้นๆ มีปัญหา … ทางแก้ไข ก็ลองหาเว็บอื่นแปลงไฟล์ดู หรือไม่ก็หาฟอนท์ใกล้เคียงใช้ทดแทนไปก่อนครับ เพราะถ้ามันไม่ได้ก็คือไม่ได้ ไม่งั้นก็ต้องไปแก้ sourcecode ของฟอนท์นั้นๆเลยทีเดียว

  2. ขอบคุณมากเลยครับ ละเอียด และเข้าใจง่าย มากๆเลย ครับ
    มีประโยชน์ ต่อพี่น้องประชาชนชาวไทย ผู้ทำ web มากๆ ครับ

Leave a Reply