WOFF2

WOFF2 được phát triển bởi Google và trở thành W3C Recommendation vào tháng 3 năm 2018. Nó xây dựng dựa trên khái niệm WOFF gốc nhưng thay thế nén zlib bằng Brotli — một thuật toán nén cũng được Google phát triển — đạt tỷ lệ nén tốt hơn đáng kể.

Nhưng WOFF2 không chỉ là "WOFF với nén tốt hơn". Nó giới thiệu một biến đổi tiền xử lý tái cấu trúc dữ liệu font trước khi nén, làm cho nó có thể nén được nhiều hơn đáng kể. Đối với TrueType outlines, điều này có nghĩa là áp dụng predictive coding cho tọa độ glyph — mã hóa mỗi điểm như một delta từ giá trị dự đoán thay vì tọa độ tuyệt đối. Kết quả là một luồng byte dư thừa nhiều hơn mà Brotli có thể nén mạnh.

Cách tiếp cận hai bước này — tiền xử lý đặc thù theo lĩnh vực theo sau bởi nén mục đích chung — là lý do tại sao WOFF2 luôn tạo ra các tệp font nhỏ nhất trong mọi định dạng.

WOFF2 áp dụng pipeline nén hai pha cho dữ liệu font nguồn:

• Pha 1: Biến đổi tiền xử lý — các biến đổi đặc thù cho font tái cấu trúc dữ liệu để tối đa hóa khả năng nén. Đối với TrueType glyph outlines, sử dụng predictive coding của tọa độ — mỗi điểm được mã hóa là hiệu số từ vị trí dự đoán, tạo ra các số nhỏ hơn nhiều. Các biến đổi tương tự được áp dụng cho các bảng font khác.
• Pha 2: Nén Brotli — dữ liệu đã tiền xử lý sau đó được nén bằng Brotli, kết hợp nén cửa sổ trượt LZ77 với mã hóa Huffman và từ điển tĩnh tích hợp. Brotli đạt nén tốt hơn zlib 20-30% trên dữ liệu font điển hình.

Ở phía trình duyệt, quá trình đảo ngược: giải nén Brotli theo sau bởi các biến đổi nghịch để tái tạo các bảng font gốc. Mặc dù có bước thêm, giải nén WOFF2 thực sự nhanh hơn WOFF1 — Brotli được thiết kế để giải mã nhanh, và tệp nhỏ hơn truyền nhanh hơn qua mạng.

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

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

Lưu ý chúng ta chỉ liệt kê một src — chỉ WOFF2. Với mức phủ trình duyệt 97%+, nhiều dự án hiện đại không còn cần định dạng fallback. Chỉ thị font-display: swap yêu cầu trình duyệt hiển thị văn bản ngay lập tức bằng font dự phòng trong khi icon font đang tải, ngăn chặn văn bản vô hình.

WOFF2 được hỗ trợ rộng rãi trên tất cả các trình duyệt hiện đại. Khoảng cách đáng kể duy nhất là Internet Explorer, đã được Microsoft chính thức ngừng vào tháng 6 năm 2022.

Mức phủ toàn cầu kết hợp ở khoảng 97%. ~3% còn lại hầu hết bao gồm các cài đặt IE cũ và các trình duyệt di động rất cũ.

Để minh họa lợi thế nén của WOFF2, đây là kích thước tệp điển hình cho icon font chứa 200 glyphs:

Tiết kiệm tích lũy với các bộ biểu tượng lớn hơn. Font 500 glyph có thể là 200 KB dạng TTF, 120 KB dạng WOFF và chỉ 82 KB dạng WOFF2. Qua hàng nghìn lần tải trang, những kilobyte này chuyển trực tiếp thành thời gian hiển thị nhanh hơn và chi phí băng thông thấp hơn.

Luôn luôn. WOFF2 nên là định dạng mặc định cho bất kỳ triển khai icon font dựa trên web nào. Nó mang lại các tệp nhỏ nhất, giải nén nhanh nhất và hỗ trợ trình duyệt gần như toàn cầu.

Tình huống duy nhất bạn sẽ không sử dụng WOFF2 là nếu bạn đang nhắm mục tiêu Internet Explorer — trong trường hợp đó, ghép nó với WOFF làm fallback:

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

Trình duyệt hiện đại sẽ lấy tệp WOFF2; IE 11 sẽ chuyển sang WOFF. Mọi người đều nhận được font, mọi người đều nhận được nén.