WOFF

WOFF 1.0 ถูกพัฒนาร่วมกันโดย Mozilla, Opera และ Microsoft เป็นรูปแบบฟอนต์แรกที่สร้างขึ้นมาเพื่อเว็บโดยเฉพาะ กลายเป็น W3C Recommendation ในเดือนธันวาคม 2012 ถือเป็นจุดเปลี่ยนสำคัญด้านการพิมพ์บนเว็บ

โดยพื้นฐาน WOFF คือตัวห่อรอบข้อมูลฟอนต์ TrueType หรือ OpenType ที่มีอยู่ โดยใช้ การบีบอัด zlib เพื่อลดขนาดไฟล์ และมีฟิลด์ metadata เพิ่มเติมสำหรับการอนุญาตสิทธิ์และการระบุแหล่งที่มา ก่อน WOFF นักพัฒนาเว็บต้องให้บริการไฟล์ TTF หรือ OTF ดิบ — ขนาดใหญ่ ไม่บีบอัด และขาดวิธีมาตรฐานในการฝังข้อมูลการอนุญาตสิทธิ์

นวัตกรรมสำคัญคือการสร้าง web font container เฉพาะที่แก้ปัญหาสามอย่างพร้อมกัน: ขนาดไฟล์เล็กลงผ่านการบีบอัด บล็อก metadata มาตรฐานสำหรับการอนุญาตสิทธิ์ฟอนต์ และรูปแบบที่เบราว์เซอร์สามารถตรวจสอบและ sandbox ได้อย่างง่ายดายเพื่อความปลอดภัย

WOFF container ห่อตารางฟอนต์ที่มีอยู่ (จากไฟล์ต้นทาง TTF หรือ OTF) ด้วย การบีบอัด zlib ต่อตาราง แต่ละตารางในฟอนต์ต้นฉบับ — glyph outlines, kerning data, naming records — ถูกบีบอัดแยกกัน ซึ่งช่วยให้เบราว์เซอร์แตกการบีบอัดเฉพาะตารางที่ต้องการ

WOFF header เริ่มต้นด้วยลายเซ็น 4 ไบต์ (wOFF) ตามด้วย font flavor (ระบุว่าข้อมูลที่ห่อเป็น TrueType หรือ CFF) ขนาดที่บีบอัดทั้งหมด และตัวชี้ไปยัง metadata block เพิ่มเติม เบราว์เซอร์อ่าน header นี้ แตกการบีบอัดตารางแต่ละตารางกลับเป็นรูปแบบเดิม และส่งข้อมูลฟอนต์ที่สร้างใหม่ไปยัง text rendering engine

จากมุมมองของ rendering engine ไฟล์ WOFF ที่แตกการบีบอัดแล้วเหมือนกับ TTF หรือ OTF ต้นฉบับทุกประการ — การบีบอัดโปร่งใสสมบูรณ์

@font-face {
  font-family: 'MyIcons';
  src: url('icons.woff2') format('woff2'),
       url('icons.woff') format('woff');
}

เบราว์เซอร์ลองแต่ละรายการ src ตามลำดับ เบราว์เซอร์สมัยใหม่จะโหลดไฟล์ WOFF2 (เล็กกว่าและเร็วกว่า) ส่วนเบราว์เซอร์รุ่นเก่าที่ไม่รู้จัก WOFF2 จะเปลี่ยนไปใช้ไฟล์ WOFF แทน แนวทางแบบ cascading นี้ให้ประสิทธิภาพที่ดีที่สุดพร้อมความเข้ากันได้สูงสุด

WOFF ได้รับการรองรับจากเบราว์เซอร์หลักทั้งหมดตั้งแต่ต้นทศวรรษ 2010 ทำให้เป็นรูปแบบ fallback ที่ปลอดภัยที่สุดสำหรับ web fonts รองรับเบราว์เซอร์ได้กว้างกว่า WOFF2 เนื่องจากรวมการรองรับ Internet Explorer เวอร์ชันเก่าด้วย

ด้วยการครอบคลุมเบราว์เซอร์ทั่วโลก 98%+ WOFF เป็นที่เข้าใจได้โดยเบราว์เซอร์ที่ยังใช้งานอยู่เกือบทุกตัว ช่องว่างที่น่าสังเกตเพียงอย่างเดียวคือ IE 6-8 ซึ่งต้องใช้ EOT แทน

WOFF2 เป็นตัวสืบทอดของ WOFF และในแง่ปฏิบัติส่วนใหญ่ มันดีกว่าอย่างสมบูรณ์ ต่อไปนี้คือการเปรียบเทียบ:

WOFF2 มีการบีบอัด ดีกว่า WOFF ประมาณ 30% ด้วย Brotli และขั้นตอนการประมวลผลล่วงหน้าเฉพาะทางที่ทำให้ข้อมูล glyph บีบอัดได้มากขึ้น นอกจากนี้ยังแตกไฟล์ได้เร็วกว่า การรองรับเบราว์เซอร์สมัยใหม่สำหรับ WOFF2 กว้างพอๆ กัน — ช่องว่างเดียวคือ Internet Explorer 9-11 ซึ่งรองรับ WOFF แต่ไม่รองรับ WOFF2

สำหรับโปรเจกต์ส่วนใหญ่ที่กำหนดเป้าหมายเบราว์เซอร์ตั้งแต่ปี 2024 เป็นต้นไป WOFF2 อย่างเดียวเพียงพอ ข้อได้เปรียบเดียวที่ WOFF ยังมีคือการครอบคลุม IE 9-11

แม้จะถูกแทนที่โดย WOFF2 แต่ยังมีเหตุผลที่ถูกต้องในการรวม WOFF ใน font stack ของคุณ:

• เป็น fallback คู่กับ WOFF2 — ระบุ WOFF2 ก่อนในการประกาศ @font-face และ WOFF เป็นลำดับที่สอง ให้เบราว์เซอร์สมัยใหม่ได้ไฟล์เล็กกว่าในขณะที่มั่นใจว่าเบราว์เซอร์รุ่นเก่ายังคงได้รับฟอนต์
• เมื่อต้องรองรับ IE 11 — IE 11 รองรับ WOFF แต่ไม่รองรับ WOFF2 ดังนั้น WOFF คือรูปแบบที่บีบอัดดีที่สุดที่ใช้ได้สำหรับเบราว์เซอร์นั้น
• ในสภาพแวดล้อมที่ไม่มี Brotli — บางเครื่องมือ build, proxies หรือ CDN รุ่นเก่าอาจไม่จัดการการบีบอัด Brotli ของ WOFF2 ได้อย่างถูกต้อง การบีบอัด zlib ของ WOFF รองรับทั่วกัน

ถ้าไม่มีสิ่งเหล่านี้ที่ใช้กับโปรเจกต์ของคุณ คุณสามารถข้าม WOFF และใช้แค่ WOFF2 ได้อย่างปลอดภัย