TTF vs OTF vs WOFF2: So sánh các định dạng Font chữ
Lược sử ngắn gọn về ba định dạng này
TrueType (TTF) ra đời vào năm 1989 từ sự hợp tác giữa Apple và Microsoft. Mục tiêu của họ là cho phép hệ điều hành kiểm soát trực tiếp việc kết xuất font chữ, cắt bỏ sự phụ thuộc vào giấy phép PostScript của Adobe. Một file TTF lưu trữ đường viền ký tự (glyph outlines) dưới dạng đường cong Bézier bậc hai và gói mọi thứ—số liệu, hướng dẫn hinting, bảng kerning—vào một file nhị phân duy nhất. Trong phần lớn thập niên 90, nó là vua không thể tranh cãi của các font chữ desktop trên cả Windows và macOS. Sau đó đến OpenType (OTF) vào năm 1996, được Microsoft phát triển và sớm có sự tham gia của Adobe. Thay vì bắt đầu từ con số không, OpenType đã mở rộng một cách thông minh từ bộ chứa TrueType. Một file OTF có thể sử dụng đường cong bậc hai của TrueType hoặc đường cong PostScript bậc ba của Adobe (CFF outlines), đó là lý do bạn thấy thuật ngữ 'OTF dựa trên CFF'. Quan trọng hơn, định dạng này giới thiệu một bộ bảng layout mạnh mẽ—GSUB và GPOS—mở khóa các tính năng như chữ ghép (ligatures), chữ hoa nhỏ (small caps), nét trang trí (swashes), và các biến thể theo ngữ cảnh. Một font OTF phức tạp cho một hệ chữ phức tạp như tiếng Ả Rập có thể chứa hàng ngàn quy tắc thay thế ký tự. WOFF2 (Web Open Font Format 2) lại là một cuộc chơi hoàn toàn khác. Được phê chuẩn là một Khuyến nghị của W3C vào năm 2018, nó không phải là một định dạng đường viền mới mà là một lớp vỏ nén siêu hiệu quả. Nó lấy một file TTF hoặc OTF hiện có, áp dụng thuật toán nén Brotli và một bước tiền xử lý đặc biệt nhận biết font chữ, và cho ra một file thường nhỏ hơn 30–50%. WOFF2 được xây dựng dành riêng cho việc phân phối trên web. Các trình duyệt giải nén nó một cách nhanh chóng, vì vậy nó thậm chí không bao giờ xuất hiện trong trình quản lý font của hệ điều hành. Nắm bắt sự khác biệt này—định dạng đường viền so với định dạng phân phối—là chìa khóa để hiểu cách sử dụng chúng.
Kích thước File và Nén: Những con số thực sự quan trọng
Kích thước file thô ảnh hưởng trực tiếp đến những điểm đau đầu nhất: thời gian tải trang, kích thước gói ứng dụng, và chi phí băng thông CDN. Hãy xem xét một vài con số cụ thể. Một kiểu chữ Latin phức tạp vừa phải như Source Sans Pro Regular nặng khoảng 260 KB dưới dạng TTF. Phiên bản OTF, sử dụng đường viền CFF hiệu quả hơn, chỉ khoảng 155 KB. Đó là bởi vì đường cong bậc ba của CFF thường có thể mô tả hình dạng với ít điểm hơn so với đường cong bậc hai của TrueType, dẫn đến các font OTF dựa trên CFF nhỏ hơn 20–40% đối với các hệ chữ Latin. Bây giờ, hãy chuyển đổi cùng font chữ đó sang WOFF2 và bạn sẽ có một file khoảng 75 KB. Đó là mức giảm khổng lồ 71% so với file TTF ban đầu. Với font chữ CJK (Trung, Nhật, Hàn), câu chuyện lại khác. Một font TTF CJK đầy đủ như Noto Sans CJK SC có thể phình to lên hơn 20 MB. Nén WOFF2 có giúp ích, có thể giảm xuống còn 13–15 MB, nhưng nó không phải là giải pháp thần kỳ. Giải pháp thực sự cho các font chữ khổng lồ là subsetting (tạo bộ con), một quy trình riêng biệt với việc chuyển đổi định dạng đơn giản. Chỉ riêng WOFF2 sẽ không cứu được một font chữ có 65.000 ký tự. Còn WOFF (phiên bản 1), về cơ bản nó đã là đồ cổ trong viện bảo tàng rồi. Nó sử dụng thuật toán nén zlib và đã hoàn toàn bị WOFF2 thay thế. Theo caniuse.com, hỗ trợ WOFF2 đã đạt hơn 97% người dùng toàn cầu từ năm 2024, bao gồm mọi trình duyệt hiện đại mà bạn quan tâm. Những trường hợp duy nhất còn sót lại là các trình duyệt nhúng cổ lỗ hoặc các ki-ốt vẫn chạy Internet Explorer 11. Đối với bất kỳ dự án web mới nào, WOFF2 không chỉ là lựa chọn tốt nhất; nó là lựa chọn hợp lý duy nhất.
Tính năng OpenType: Nơi OTF thực sự vượt trội hơn TTF
Sự khác biệt kỹ thuật quan trọng nhất giữa một font OTF tốt và một font TTF là khả năng truy cập vào các tính năng layout OpenType nâng cao. Mặc dù về mặt kỹ thuật, cả hai loại file đều có thể chứa các bảng GSUB (Thay thế Ký tự) và GPOS (Định vị Ký tự) cần thiết, nhưng các xưởng chế tác font chuyên nghiệp gần như chỉ độc quyền xây dựng bộ tính năng phong phú của họ vào các bản phát hành OTF. Trong thực tế, những thứ hay ho đều nằm trong OTF. Những tính năng này thực sự làm gì? Chữ ghép (Ligatures) thay thế các chuỗi phổ biến như 'fi' và 'fl' bằng một ký tự duy nhất được chế tác hoàn hảo, ngăn chặn việc va chạm. Chữ ghép tùy chọn còn đi xa hơn, kết hợp một cách nghệ thuật các cặp như 'ct' hoặc 'Th' để tạo ra một phong cách thư pháp. Chữ hoa nhỏ (Small caps) thay thế các chữ hoa có chiều cao đầy đủ bằng các phiên bản nhỏ hơn được điều chỉnh về mặt quang học—đây là những ký tự được vẽ lại, không chỉ đơn thuần là thu nhỏ. Chữ số kiểu cũ (Oldstyle figures) cho bạn các con số có phần nhô lên và xuống, cho phép chúng hòa quyện đẹp mắt vào một dòng văn bản. Một file OTF duy nhất cho một kiểu chữ như Minion Pro có thể chứa hơn 1.700 ký tự và hàng tá các tính năng này, được gắn thẻ là 'onum,' 'smcp,' 'calt,' 'swsh,' và 'hist.' Trong CSS, bạn kích hoạt chúng bằng `font-feature-settings: 'onum' 1;` hoặc `font-variant-numeric: oldstyle-nums;`. Trong Adobe InDesign, bạn sẽ tìm thấy chúng dưới Type > OpenType. Ngay cả Microsoft Word 365 cũng có một số hỗ trợ trong hộp thoại font nâng cao, mặc dù nó không toàn diện bằng các công cụ của Adobe. Một file TTF không có các bảng này thì không cung cấp được gì cả, bất kể ứng dụng nào. Nếu thiết kế của bạn phụ thuộc vào chữ hoa nhỏ đúng chuẩn, các biến thể theo ngữ cảnh, hoặc việc định hình phức tạp cần thiết cho các hệ chữ như tiếng Ả Rập hoặc Devanagari, OTF không chỉ là một sự ưu tiên. Nó là một yêu cầu bắt buộc.
Hinting và Kết xuất: Bối cảnh Desktop và Màn hình
Font hinting là một bộ hướng dẫn bên trong file font để điều chỉnh đường viền ký tự sao cho chúng trông sắc nét ở kích thước nhỏ trên màn hình. Bất cứ ai từng phải nheo mắt nhìn dòng chữ 12px mờ nhòe đều biết nỗi khổ của việc kết xuất kém; hinting chính là liều thuốc chữa. Nếu không có nó, nét dọc của chữ 'n' thường có thể rộng một pixel trong khi nét còn lại rộng hai pixel, tạo ra một vẻ ngoài xấu xí, không đều. Hinting tốt sẽ căn chỉnh các nét đó vào lưới pixel. Các font TTF nổi tiếng với hinting TrueType thủ công, một ngôn ngữ bytecode phức tạp cho phép các nhà thiết kế kiểm soát chi tiết từng pixel. Đây là một công việc cực kỳ tốn công sức—một font được hinting thủ công hoàn toàn như Arial đại diện cho hàng trăm giờ làm việc. Thành quả thu được là rất lớn trên các hệ thống Windows cũ sử dụng trình kết xuất GDI. Các font OTF dựa trên CFF sử dụng hinting PostScript đơn giản hơn. Trên macOS, vốn từ lâu đã sử dụng một trình kết xuất gần như bỏ qua hinting, sự khác biệt này không còn quan trọng nữa. Trên Windows, trình kết xuất ClearType (mặc định từ Vista) đã thu hẹp đáng kể khoảng cách. Và trên các màn hình có DPI cao—về cơ bản là bất kỳ điện thoại hiện đại hoặc màn hình "Retina" nào—hinting trở nên gần như không còn quan trọng. Các pixel đơn giản là quá nhỏ để những vấn đề về căn chỉnh lưới đó xuất hiện. WOFF2 không thay đổi câu chuyện về hinting; nó chỉ bảo tồn dữ liệu hinting từ font gốc mà nó nén. Nếu bạn chuyển đổi một font TTF được hinting tốt, những hint đó sẽ được giữ lại. Bài học thực tế rút ra là gì? Nếu người dùng chính của bạn đang sử dụng màn hình Windows không phải HD và bạn đang hiển thị văn bản dưới 16px, một font TTF được hinting thủ công vẫn có lợi thế rõ rệt. Đối với việc sử dụng trên web trên phần cứng hiện đại, sự khác biệt gần như không thể nhận ra.
Khi nào nên dùng từng định dạng: Hướng dẫn quyết định thực tế
Để cài đặt trên máy tính—trong hệ điều hành, ứng dụng thiết kế, hoặc bộ phần mềm văn phòng—bạn cần TTF hoặc OTF. Cả Windows và macOS đều hỗ trợ cả hai một cách tự nhiên, cũng như các bản phân phối Linux. Quyết định phụ thuộc vào nhu cầu của bạn. Nếu bạn là một nhà thiết kế cần chữ ghép, nét trang trí, và các tính năng typographic nâng cao khác trong InDesign, bạn sẽ muốn dùng OTF. Nếu bạn là một quản trị viên IT đang triển khai một font chữ của công ty trên hàng loạt máy tính Windows, một font TTF có hinting thường là lựa chọn an toàn và tương thích hơn. Phân phối trên web thì đơn giản: WOFF2. Chấm hết. Khai báo `@font-face` trong CSS của bạn nên luôn liệt kê WOFF2 trước tiên: `src: url('font.woff2') format('woff2'), url('font.woff') format('woff');`. Phục vụ một file TTF hoặc OTF thô qua web là một tội ác về hiệu năng. Bạn đang buộc người dùng phải download dữ liệu nhiều hơn 2-3 lần so với mức cần thiết. Nếu bạn thấy một theme cũ tham chiếu đến một file .ttf trong stylesheet của nó, việc đổi nó sang WOFF2 là một cách cải thiện hiệu năng nhanh chóng và dễ dàng. Ứng dụng di động là một bối cảnh khác. Cả iOS và Android đều sử dụng các file TTF và OTF được đóng gói bên trong gói ứng dụng; cả hai đều không sử dụng WOFF2 cho mục đích này, vì nó là một định dạng phân phối chỉ dành cho trình duyệt. Các ứng dụng Flutter đóng gói TTF hoặc OTF trong thư mục assets và khai báo chúng trong `pubspec.yaml`, và React Native cũng theo một mô hình tương tự. Các engine game có những ưu tiên riêng. TextMeshPro của Unity hoạt động với OTF và TTF để tạo ra các tài sản font chữ của nó. Trình nhập của Unreal Engine lại ưu tiên TTF. Cả hai đều sẽ không nhập trực tiếp một file WOFF2, vì vậy nếu đó là tất cả những gì bạn có, bạn sẽ cần chuyển đổi nó trở lại thành TTF hoặc OTF trước.
Chuyển đổi giữa các định dạng với CocoConvert
Cần chuyển đổi qua lại giữa các định dạng này? CocoConvert xử lý các luồng chuyển đổi quan trọng nhất: TTF sang WOFF2, OTF sang WOFF2, WOFF2 sang TTF, và thậm chí cả OTF sang TTF. Quy trình của chúng tôi được cung cấp bởi `fonttools`, thư viện Python tiêu chuẩn ngành được Google Fonts sử dụng. Điều này đảm bảo các file đã chuyển đổi của bạn tuân thủ tiêu chuẩn và các bảng OpenType như GSUB, GPOS, bản ghi tên, và dữ liệu hinting được bảo tồn. Để tạo một font chữ sẵn sàng cho web, chỉ cần tải lên file .ttf của bạn trên trang chuyển đổi font của chúng tôi, chọn WOFF2 làm đầu ra, và nhấp vào Chuyển đổi. Một font chữ Latin thông thường được xử lý trong vài giây. File WOFF2 kết quả giữ lại tất cả các số liệu và tính năng layout của bản gốc, không có gì bị loại bỏ theo mặc định. Tất nhiên, CocoConvert không làm tất cả mọi thứ. Nó không thực hiện subsetting. Nếu bạn chuyển đổi một font CJK 20 MB, bạn sẽ nhận được một file WOFF2 nén 13 MB, chứ không phải là một file 50 KB gọn nhẹ chỉ chứa các ký tự bạn cần. Đối với việc đó, bạn sẽ cần một công cụ chuyên dụng như `pyftsubset`. CocoConvert cũng không thay đổi siêu dữ liệu cấp phép. Nếu cờ nhúng của font (fsType) hạn chế việc sử dụng trên web, cờ đó vẫn còn trong file đã chuyển đổi. Hãy nhớ: chuyển đổi một font chữ không làm thay đổi giấy phép của nó. Nếu bạn không có quyền sử dụng một font chữ trên web, việc chuyển đổi nó sang WOFF2 sẽ không làm cho nó trở nên hợp pháp. Việc chuyển đổi WOFF2 trở lại TTF cực kỳ hữu ích khi bạn tìm thấy một font chữ web và cần cài đặt nó để sử dụng trên máy tính. Quá trình giải nén là không mất dữ liệu (lossless), có nghĩa là file TTF kết quả có dữ liệu đường viền giống hệt từng byte so với nguồn ban đầu. Việc chuyển đổi đảo ngược một cách sạch sẽ mọi tối ưu hóa dành riêng cho WOFF2, mang lại cho bạn một file desktop hoàn toàn có thể sử dụng được.
Tóm tắt: Chọn đúng định dạng mà không cần suy nghĩ quá nhiều
Hãy đi thẳng vào vấn đề. Ba định dạng này không phải là các lựa chọn thay thế cho nhau. Chúng là những công cụ khác nhau cho những công việc khác nhau. TTF là bộ chuyển đổi đa năng. Mọi nền tảng xử lý font chữ đều có thể xử lý TTF. Đó là lựa chọn đúng đắn khi bạn cần khả năng tương thích tối đa, đang nhắm đến các môi trường Windows cũ nơi hinting đặc trưng của nó tỏa sáng, hoặc khi một công cụ như engine game yêu cầu nó. Điểm yếu chính của nó là kích thước file lớn hơn so với các font OTF dựa trên CFF và thường thiếu các tính năng typographic nâng cao. OTF là lựa chọn của dân chuyên nghiệp cho công việc desktop. Khi một xưởng chế tác font bán một font chữ cho thiết kế nghiêm túc, phiên bản OTF là thứ bạn muốn. Nó chứa bộ tính năng OpenType hoàn chỉnh, đường viền CFF của nó nhỏ gọn, và mọi ứng dụng thiết kế hiện đại đều hỗ trợ nó. Nhược điểm thực sự duy nhất của nó là quá cồng kềnh để phân phối qua web. Phục vụ một file OTF thô qua HTTP là một sự lãng phí băng thông. WOFF2 chỉ dành cho một và chỉ một mục đích: web. Nó không phải là một loại font mới, chỉ là một font hiện có được nén một cách xuất sắc cho các trình duyệt. Hãy sử dụng WOFF2 trong các quy tắc `@font-face` của bạn. Luôn luôn là vậy. Hãy giữ file TTF hoặc OTF gốc làm file nguồn của bạn, nhưng hãy coi WOFF2 như một tài sản dùng một lần, đã được tối ưu hóa để phân phối. Đây là quy trình làm việc đơn giản cho bất kỳ dự án mới nào: lấy một font OTF chất lượng từ một xưởng chế tác. Sử dụng CocoConvert để tạo một phiên bản WOFF2 cho trang web của bạn. Giữ lại file OTF gốc cho bất kỳ công việc in ấn hoặc thiết kế nào. Và nếu bạn có lúc chỉ có một file WOFF2 và cần nó trên máy tính của mình, hãy chuyển đổi nó trở lại thành TTF. Chỉ đơn giản vậy thôi.