Webfont ภาษาไทย จัดการให้ใช้งานได้ทุก Browser

ต้องเข้าใจว่าปัจจุบันมีจำนวนเบราว์เซอร์ให้ผู้ใช้งานอินเตอร์เนตเลือกใช้งานอยู่หลายค่ายและแต่ละเบราว์เซอร์มีมาตรฐาน
การจัดการกับการแสดงผลที่แตกต่างกัน ค่า CSS Default ของแต่ละเบราว์เซอร์ก็มีความแตกต่างกัน จะเห็นได้ถ้าเรา
เปิดเว็บไซต์หน้าเดียวกันแต่คนละเบราว์เซอร์ขนาดของฟอนต์หรือ font-size หรือระยะห่างระหว่างบรรทัด line-height

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

ประเภทของ Font

TrueType

คือมาตรฐานของตัวอักษรทั้งหมดที่อยู่ในรูปแบบดิจิตอลหรือเครื่องคอมพิวเตอร์ ถูกคิดค้นโดยบริษัทแอปเปิ้ลและต่อมาก็เปิด
ให้บริษัท Microsoft และบริษัทอื่น ๆ นำไปพัฒนา จากที่ใช้งานได้เฉพาะในระบบปฏิบัติการ Mac OS ต่อมาก็สามารถใช้ได้
ในระบบปฏิบัติการ Window ด้วย

OpenType

คือมาตรฐานใหม่ของตัวอักษรทั้งหมดที่อยู่ในรูปแบบดิจิตอลหรือเครื่องคอมพิวเตอร์ เป็นการพัฒนาร่วมกันของ Adobe และ
บริษัท Microsoft สามารถรองรับการทำงานบนระบบปฏิบัติการทั้ง Mac OS และระบบปฏิบัติการ Window โดยไม่ต้อง
แปลงข้อมูล มีความสามารถทมากขึ้น มีการรองรับอักขระที่หลากหลายและมากกว่ารุ่นก่อนคือ TrueType

ประเภทของ Webfont

WOFF / WOFF2 ย่อมาจาก Web Open Font Format

ถูกพัฒนาขึ้นโดยบริษัท Mozilla Corporation ( ผู้พัฒนาเบราว์เซอร์ Firefox ) เป็นรูปแบบ Webfont ที่โหลดเร็ว
กว่าแบบอื่น ๆ และเป็นรูปแบบ webfont ที่หลาย ๆ เบราว์เซอร์จะใช้งานเพื่อให้เป็นมาตรฐานหลัก WOFF2 เป็นเวอร์ชั่น
ใหม่และยังมีหลาย ๆ เบราว์เซอร์ไม่สามารถใช้งานได้เช่น Safari,IE และบน iOS

SVG / SVGZ ย่อมาจาก Scalable Vector Graphics (Font)

เป็นรูปแบบ Webfont แบบ Vector file มีขนาดไฟล์เล็กเหมาะกับการใช้งานสำหรับ Mobile รองรับการทำงาน
สำหรับ iOS แต่ไม่รองรับการทำงานบน Firefox, IE และ IE Mobile ส่วน SVGZ คือไฟล์ .zip ของ SVG นั่นเอง

EOT ย่อมาจาก Embedded Open Type

เป็นรูปแบบ Webfont ที่ถูกสร้างขึ้นโดยบริษัท Microsoft และเพื่อรองรับการทำงานของ IE Browser เท่านั้น นั่นหมาย
ความว่า ถ้าเราพัฒนาเว็บไซต์ขึ้นมาจะใช้งาน font-face ต้องมีเจ้าตัวนี้อยู่ด้วย ฟอนต์เราถึงจะแสดงผลใน IE ได้

จะใช้ Webfont อย่างไรให้รองรับทุก Browser

ตอนที่เราเขียน font-face ใน CSS เราต้องทำการเรียกใช้งานไฟล์ฟอนต์ในทุก ๆ type เพื่อให้แน่ใจว่าเมื่อเว็บไซต์
ของเราถูกเปิดใช้งานในแต่ละเบราว์เซอร์และในระบบปฏิบัติการที่แตกต่างกัน ฟอนต์หลักในเว็บไซต์ของเราจะสามารถแสดง
ผลได้อย่างถูกต้องตามที่เราต้องการ โดยสรุปแล้วจะเขียนได้ประมาณนี้ครับ

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

เราสามารถ generator ไฟล์ฟอนต์ต้นแบบให้ได้ไฟล์นามสกุลต่าง ๆ ครบตาม font-face ด้านบนโดยสามารถใช้
เครื่องมือ convert webfont แบบออนไลน์ได้ที่ https://www.fontsquirrel.com/tools/webfont-generator
เลือกฟอนต์ที่เราต้องการแปลงให้ใช้งานบนเว็บไซต์ได้ ( ไม่ไช่ทุกฟอนต์จะสามารถแปลงได้ ) จากนั้นก็กด Convert
เสร็จจะมีปุ่มให้เราดาวน์โหลดไฟล์มาใช้งานซึ่งในนั้นจะมีฟอนต์มาให้เราทุกนามสกุลรวมไปถึงตัวอย่างการใช้งานด้วยครับ

Webfont ภาษาไทย จัดการให้ใช้งานได้ทุก Browser