WOFF

WOFF 1.0 được phát triển chung bởi Mozilla, Opera và Microsoft như định dạng font đầu tiên được xây dựng từ đầu cho web. Nó trở thành W3C Recommendation vào tháng 12 năm 2012, đánh dấu một cột mốc trong việc sắp chữ trên web.

Về cốt lõi, WOFF là lớp bọc xung quanh dữ liệu font TrueType hoặc OpenType hiện có. Nó áp dụng nén zlib để giảm kích thước tệp và bao gồm các trường metadata tùy chọn cho cấp phép và quy trích. Trước WOFF, các nhà phát triển web phải phục vụ các tệp TTF hoặc OTF thô — lớn, không nén và thiếu bất kỳ cách tiêu chuẩn nào để nhúng thông tin cấp phép.

Đổi mới chính là tạo ra một web font container mục đích cụ thể giải quyết ba vấn đề cùng một lúc: kích thước tệp nhỏ hơn thông qua nén, khối metadata tiêu chuẩn cho cấp phép font, và định dạng mà trình duyệt có thể dễ dàng xác thực và sandbox để bảo mật.

WOFF container bọc các bảng font hiện có (từ các tệp nguồn TTF hoặc OTF) với nén zlib theo từng bảng. Mỗi bảng trong font gốc — glyph outlines, kerning data, naming records — được nén độc lập, cho phép trình duyệt chỉ giải nén những bảng nó cần.

Header WOFF bắt đầu với chữ ký bốn byte (wOFF), theo sau là font flavor (chỉ ra liệu dữ liệu được bọc là TrueType hay CFF), tổng kích thước nén, và con trỏ tới khối metadata tùy chọn. Trình duyệt đọc header này, giải nén các bảng riêng lẻ về dạng ban đầu, và chuyển dữ liệu font được tái tạo cho engine hiển thị văn bản.

Từ góc nhìn của rendering engine, file WOFF đã giải nén hoàn toàn giống với TTF hoặc OTF gốc — quá trình nén hoàn toàn trong suốt.

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

Trình duyệt thử từng mục src theo thứ tự. Các trình duyệt hiện đại sẽ tải tệp WOFF2 (nhỏ hơn, nhanh hơn); các trình duyệt cũ không hiểu WOFF2 sẽ chuyển sang tệp WOFF. Cách tiếp cận cascade này cho bạn hiệu suất tối ưu với khả năng tương thích tối đa.

WOFF đã được tất cả các trình duyệt chính hỗ trợ từ đầu những năm 2010, khiến nó trở thành định dạng fallback an toàn nhất cho web fonts. Nó bao phủ phạm vi trình duyệt rộng hơn WOFF2 vì bao gồm hỗ trợ các phiên bản Internet Explorer cũ hơn.

Với mức phủ trình duyệt toàn cầu 98%+, WOFF được hiểu bởi hầu hết mọi trình duyệt vẫn đang được sử dụng. Khoảng cách đáng chú ý duy nhất là IE 6-8, cần sử dụng EOT thay thế.

WOFF2 là người kế nhiệm của WOFF, và trong hầu hết các khía cạnh thực tế, nó là sự cải tiến hoàn toàn. Đây là cách so sánh:

WOFF2 cung cấp nén tốt hơn WOFF khoảng 30% nhờ Brotli và bước tiền xử lý chuyên biệt giúp dữ liệu glyph nén được tốt hơn. Nó cũng giải nén nhanh hơn. Hỗ trợ trình duyệt hiện đại cho WOFF2 cũng rộng tương đương — khoảng cách duy nhất là Internet Explorer 9-11, hỗ trợ WOFF nhưng không hỗ trợ WOFF2.

Đối với hầu hết các dự án nhắm mục tiêu trình duyệt từ năm 2024 trở đi, chỉ WOFF2 là đủ. Lợi thế duy nhất còn lại của WOFF là phủ IE 9-11.

Mặc dù đã bị WOFF2 thay thế, vẫn còn lý do hợp lệ để bao gồm WOFF trong font stack của bạn:

• Làm fallback bên cạnh WOFF2 — liệt kê WOFF2 đầu tiên trong khai báo @font-face và WOFF thứ hai, cung cấp cho trình duyệt hiện đại tệp nhỏ hơn trong khi vẫn đảm bảo trình duyệt cũ có font.
• Khi cần hỗ trợ IE 11 — IE 11 hỗ trợ WOFF nhưng không hỗ trợ WOFF2, vì vậy WOFF là định dạng nén tốt nhất có sẵn cho trình duyệt đó.
• Trong môi trường không có Brotli — một số công cụ build cũ hơn, proxies hoặc CDN có thể không xử lý đúng nén Brotli của WOFF2; nén zlib của WOFF được hỗ trợ rộng rãi.

Nếu không có điều nào trong số này áp dụng cho dự án của bạn, bạn có thể bỏ qua WOFF và chỉ dùng WOFF2 một cách an toàn.