Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> ซอฟต์แวร์ >> ประเภทไฟล์

WOFF (Web Open Font Format) คืออะไร?

Web Open Font Format (WOFF) เป็นรูปแบบไฟล์สำหรับฟอนต์เว็บที่พัฒนาโดย Mozilla ไฟล์ WOFF สามารถมีไฟล์ TTF และ OTF ที่บีบอัดรวมถึงข้อมูลลิขสิทธิ์และเมตาดาต้าอื่นๆ นี่คือสิ่งที่คุณต้องรู้เกี่ยวกับ WOFF

ข้อมูลในบทความนี้ใช้ได้กับไฟล์ WOFF และ WOFF2

ไฟล์ WOFF คืออะไร?

คล้ายกับไฟล์ ZIP ไฟล์ WOFF ทำหน้าที่เป็นคอนเทนเนอร์สำหรับไฟล์อื่นๆ โดยเฉพาะไฟล์ TrueType Font (TTF) และ OpenType Font (OTF) ไฟล์ประเภทเหล่านี้ให้นักออกแบบเว็บสามารถใช้ฟอนต์นอกเหนือจากตัวอักษรมาตรฐานที่พบบนคอมพิวเตอร์ส่วนใหญ่

WOFF ถูกแทนที่โดยรูปแบบ WOFF2 แล้ว WOFF2 ให้อัลกอริทึมการบีบอัดที่ดีกว่าอีก ลดขนาดไฟล์ต้นฉบับเพิ่มอีก 30 เปอร์เซ็นต์ ดังนั้นไฟล์ WOFF2 จึงใช้แบนด์วิดท์น้อยกว่าและโหลดเร็วกว่า ไฟล์ WOFF มีนามสกุล .woff ในขณะที่ไฟล์ WOFF2 มีนามสกุล .woff2

ไฟล์ WOFF ทำงานอย่างไร?

เกือบหน้าเว็บทั้งหมดใช้ Cascading Style Sheets (CSS) เพื่อกำหนดเลย์เอาต์ของ HTML และองค์ประกอบอื่นๆ บนหน้าจอของคุณ ตัวอย่างเช่น นักพัฒนาสามารถใช้ CSS เพื่อเปลี่ยนฟอนต์เว็บโดยอ้างอิงฟอนต์ที่ติดตั้งอยู่บนคอมพิวเตอร์ของผู้ใช้แล้ว อย่างไรก็ตาม หากคอมพิวเตอร์หรือเบราว์เซอร์ของคุณไม่รองรับฟอนต์ มันจะปรากฏเป็นฟอนต์อื่นหรือไม่โหลดเลย ขึ้นอยู่กับวิธีการตั้งค่า font stack ของหน้า

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

Google Chrome, Firefox, Microsoft Edge, Opera และ Safari รองรับรูปแบบ WOFF แต่อาจต้องอัปเดตเบราว์เซอร์เป็นเวอร์ชันล่าสุด

ประโยชน์ของ WOFF

นอกจากการขยายประเภทฟอนต์ที่นักพัฒนาเว็บสามารถใช้ได้ การใช้ไฟล์ WOFF ยังมีข้อได้เปรียบหลายประการ เช่น:

  • การบีบอัด (Compression): เนื่องจากไฟล์ WOFF ถูกบีบอัด พวกเขาโหลดเร็วกว่าประเภทไฟล์ฟอนต์อื่นๆ
  • รองรับ HTML และ CSS: ต่างจากไฟล์ภาพ ไฟล์ WOFF สามารถจัดสไตล์ด้วย HTML และ CSS ได้
  • SEO: ฟอนต์ WOFF ดีกว่าภาพของข้อความสำหรับการเพิ่มประสิทธิภาพเครื่องมือค้นหา (SEO)
  • การเรนเดอร์ที่เพิ่มประสิทธิภาพ (Optimized rendering): ไฟล์ WOFF รวมข้อมูลพิมพ์ดีดรวมถึง contextual forms และ old-style figures ทำให้เรนเดอร์ได้อย่างเหมาะสมบนอุปกรณ์ทุกชนิด
  • การเข้าถึงเว็บไซต์ (Website accessibility): ไฟล์ WOFF ทำให้ไซต์เข้าถึงได้ง่ายขึ้น เนื่องจากข้อความอ่านออกเสียงได้ ในขณะที่ภาพของข้อความทำไม่ได้
  • การฝัง (Embedding): ฟอนต์ WOFF ช่วยเรื่องการทำให้เป็นสากล (internationalization) โดยอนุญาตให้คุณฝังฟอนต์ที่มีตัวอักษรจากภาษาอื่นๆ

สร้างฟอนต์ WOFF ของคุณเอง

โปรแกรมแก้ไขฟอนต์อย่าง FontForge ช่วยให้คุณออกแบบชุดฟอนต์ของตัวเองและส่งออกเป็นไฟล์ WOFF คุณยังสามารถแปลง WOFF เป็น TTF หรือ OTF ด้วย FontForge ได้ หากคุณมีโปรแกรมแก้ไขฟอนต์อื่นที่คุณชอบซึ่งรองรับเฉพาะ TTF หรือ OTF คุณสามารถใช้เครื่องมือ sfnt2woff เพื่อแปลงฟอนต์เป็นไฟล์ WOFF

Open Font Library และ Font Squirrel มีฟอนต์ในรูปแบบ WOFF หลายร้อยแบบที่ฟรีสำหรับการใช้งานเชิงพาณิชย์และไม่เชิงพาณิชย์