webfont-ภาษาไทย

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

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 เพื่อให้แน่ใจว่าเมื่อเว็บไซต์
ของเราถูกเปิดใช้งานในแต่ละเบราว์เซอร์และในระบบปฏิบัติการที่แตกต่างกัน ฟอนต์หลักในเว็บไซต์ของเราจะสามารถแสดง
ผลได้อย่างถูกต้องตามที่เราต้องการ โดยสรุปแล้วจะเขียนได้ประมาณนี้ครับ

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

กระทู้ใกล้เคียง

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