WOFF2

WOFF2 ถูกพัฒนาโดย Google และกลายเป็น W3C Recommendation ในเดือนมีนาคม 2018 สร้างต่อยอดจากแนวคิด WOFF เดิมแต่แทนที่การบีบอัด zlib ด้วย Brotli — อัลกอริทึมการบีบอัดที่พัฒนาโดย Google เช่นกัน — ซึ่งบรรลุอัตราส่วนการบีบอัดที่ดีกว่าอย่างมีนัยสำคัญ

แต่ WOFF2 ไม่ใช่แค่ "WOFF ที่มีการบีบอัดดีกว่า" มันนำเสนอ การแปลงล่วงหน้า ที่จัดโครงสร้างข้อมูลฟอนต์ใหม่ก่อนการบีบอัด ทำให้บีบอัดได้มากขึ้นอย่างมีนัยสำคัญ สำหรับ TrueType outlines หมายถึงการใช้ predictive coding กับพิกัด glyph — เข้ารหัสแต่ละจุดเป็นค่าต่างจากค่าที่คาดการณ์ไว้แทนที่จะเป็นพิกัดสัมบูรณ์ ผลลัพธ์คือ byte stream ที่ซ้ำซ้อนมากขึ้นซึ่ง Brotli สามารถบีบอัดได้อย่างเข้มข้น

แนวทางสองขั้นตอนนี้ — การประมวลผลล่วงหน้าเฉพาะโดเมนตามด้วยการบีบอัดวัตถุประสงค์ทั่วไป — คือเหตุผลที่ WOFF2 ผลิตไฟล์ฟอนต์ขนาดเล็กที่สุดในบรรดาทุกรูปแบบอย่างสม่ำเสมอ

WOFF2 ใช้ pipeline การบีบอัดสองระยะกับข้อมูลฟอนต์ต้นทาง:

• ระยะที่ 1: การแปลงล่วงหน้า — การแปลงเฉพาะฟอนต์จัดโครงสร้างข้อมูลใหม่เพื่อเพิ่มความสามารถในการบีบอัดสูงสุด สำหรับ TrueType glyph outlines ใช้ predictive coding ของพิกัด — แต่ละจุดถูกเข้ารหัสเป็นความต่างจากตำแหน่งที่คาดการณ์ไว้ ซึ่งให้ตัวเลขที่เล็กกว่ามาก การแปลงที่คล้ายกันนี้ใช้กับตารางฟอนต์อื่นๆ
• ระยะที่ 2: การบีบอัด Brotli — ข้อมูลที่ประมวลผลล่วงหน้าแล้วจะถูกบีบอัดด้วย Brotli ซึ่งรวม LZ77 sliding-window compression กับ Huffman coding และ static dictionary ในตัว Brotli บรรลุการบีบอัดที่ดีกว่า zlib 20-30% สำหรับข้อมูลฟอนต์ทั่วไป

ในฝั่งเบราว์เซอร์ กระบวนการจะย้อนกลับ: การแตก Brotli ตามด้วยการแปลงย้อนกลับเพื่อสร้างตารางฟอนต์เดิมขึ้นมาใหม่ แม้มีขั้นตอนเพิ่มเติม การแตก WOFF2 จริงๆ แล้ว เร็วกว่า WOFF1 — Brotli ถูกออกแบบมาเพื่อการถอดรหัสอย่างรวดเร็ว และไฟล์ที่เล็กกว่าส่งได้เร็วกว่าผ่านเครือข่าย

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

.icon { font-family: 'MyIcons'; }
.icon-home::before { content: '\E001'; }

สังเกตว่าเราระบุ src เพียงตัวเดียว — แค่ WOFF2 ด้วยการครอบคลุมเบราว์เซอร์ 97%+ โปรเจกต์สมัยใหม่จำนวนมากไม่ต้องการรูปแบบ fallback อีกต่อไป คำสั่ง font-display: swap บอกให้เบราว์เซอร์แสดงข้อความทันทีด้วยฟอนต์สำรองในขณะที่ icon font กำลังโหลด เพื่อป้องกันข้อความที่มองไม่เห็น

WOFF2 ได้รับการรองรับอย่างกว้างขวางในเบราว์เซอร์สมัยใหม่ทั้งหมด ช่องว่างที่สำคัญเพียงอย่างเดียวคือ Internet Explorer ซึ่ง Microsoft เลิกใช้อย่างเป็นทางการในเดือนมิถุนายน 2022

การครอบคลุมทั่วโลกรวมกันอยู่ที่ประมาณ 97% ~3% ที่เหลือประกอบด้วยการติดตั้ง IE รุ่นเก่าและเบราว์เซอร์มือถือเวอร์ชันเก่ามากเป็นหลัก

เพื่อแสดงข้อได้เปรียบการบีบอัดของ WOFF2 ต่อไปนี้คือขนาดไฟล์ทั่วไปสำหรับ icon font ที่มี 200 glyphs:

การประหยัดเพิ่มขึ้นกับชุดไอคอนที่ใหญ่กว่า ฟอนต์ 500 glyphs อาจเป็น 200 KB เป็น TTF, 120 KB เป็น WOFF และเพียง 82 KB เป็น WOFF2 ผ่านการโหลดหน้าหลายพันครั้ง kilobytes เหล่านี้แปลงเป็นเวลา paint ที่เร็วขึ้นและต้นทุน bandwidth ที่ลดลงโดยตรง

เสมอ WOFF2 ควรเป็นรูปแบบเริ่มต้นสำหรับการใช้งาน icon font บนเว็บใดๆ มันให้ไฟล์ขนาดเล็กที่สุด การแตกไฟล์เร็วที่สุด และการรองรับเบราว์เซอร์เกือบสากล

สถานการณ์เดียวที่คุณจะ ไม่ ใช้ WOFF2 คือถ้าคุณกำหนดเป้าหมาย Internet Explorer — ในกรณีนั้นจับคู่กับ WOFF เป็น fallback:

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

เบราว์เซอร์สมัยใหม่จะดึงไฟล์ WOFF2 IE 11 จะเปลี่ยนไปใช้ WOFF ทุกคนได้รับฟอนต์ ทุกคนได้รับการบีบอัด