TTF, OTF hay WOFF: chọn định dạng font nào để cài và dùng cho web

TrueType là định dạng lâu đời nhất trong bốn định dạng. Apple tung ra cùng System 7 vào năm 1991 và Microsoft đưa vào Windows 3.1 vào năm sau. Phông TrueType mô tả mỗi chữ cái bằng đường cong bậc hai, mỗi đoạn cong chỉ có một điểm điều khiển và dễ vẽ trên phần cứng đời đầu. Nó cũng mang hinting: các chương trình nhỏ nằm trong phông, căn nét và đường cong vào lưới điểm ảnh để chữ vẫn sắc nét trên màn hình độ phân giải thấp. Phần mở rộng .ttf vẫn dùng cho các phông có đường viền bậc hai này.

OpenType, do Microsoft và Adobe công bố năm 1996, là một lớp bao chứ không phải một kiểu đường viền mới. Nó có thể chứa đường viền TrueType hoặc đường viền PostScript lưu trong bảng CFF, dùng đường cong bậc ba với hai điểm điều khiển mỗi đoạn. Quanh các đường viền đó, nó bổ sung các bảng bố cục cho kiểu chữ nâng cao: ligature chuẩn và tùy chọn, small caps, chữ số kiểu cổ, bộ kiểu (stylistic sets), ký tự thay thế theo ngữ cảnh và kerning. Theo quy ước, phông OpenType dựa trên CFF được lưu thành .otf, còn phông OpenType có đường viền TrueType giữ phần mở rộng .ttf.

WOFF và WOFF2 là các lớp bao dành cho web. WOFF được soạn thảo năm 2009 và trở thành khuyến nghị của W3C năm 2012; nó nén từng bảng phông bằng zlib. WOFF2 trở thành khuyến nghị của W3C năm 2018, chuyển sang Brotli và tiền xử lý dữ liệu glyph trước, nên thường nhỏ hơn WOFF khoảng 30%. Ba định dạng phụ hoàn thiện bức tranh. EOT là định dạng web riêng của Internet Explorer, phông SVG là giải pháp tạm thời thời đầu chỉ có trên Safari, còn phông biến thiên (variable fonts), được thêm vào OpenType 1.8 năm 2016, gói cả dải độ đậm hoặc độ rộng vào một tệp.

Hãy cài TTF hoặc OTF và đừng bận tâm chọn loại nào. Windows 10 và 11 cài cả hai bằng cách nhấp chuột phải rồi chọn Install, macOS mở cả hai trong Font Book, còn máy tính Linux nhận chúng từ ~/.local/share/fonts sau khi bộ nhớ đệm phông được làm mới. Word, Photoshop, ứng dụng Figma trên máy tính, Affinity và LibreOffice đều đọc được cả hai. Nếu nhà thiết kế gửi cùng một họ phông ở cả hai dạng, OTF thường là bản gốc do nhà thiết kế chữ vẽ, còn TTF là bản chuyển đổi cho phần mềm cũ.

Những trường hợp sự khác biệt thực sự quan trọng khá hẹp. Một số chương trình máy cắt và thêu, engine game và thư viện hiển thị cho vi điều khiển chỉ hiểu đường viền TrueType, nên OTF dựa trên CFF hiển thị lỗi ở đó và cần chuyển OTF sang TTF. Ngược lại, không có gì trên máy tính cài trực tiếp WOFF hay WOFF2: các tệp đó được đóng gói cho trình duyệt. Chỉ cài một phiên bản của mỗi họ phông, vì TTF và OTF trùng tên nội bộ sẽ làm rối menu phông và ứng dụng có thể chọn nhầm.

Mọi phiên bản hiện hành của Chrome, Edge, Firefox và Safari đều đọc được WOFF2, nên nó cần là nguồn đầu tiên và thường là duy nhất trong quy tắc @font-face. Chỉ thêm dòng WOFF phía sau nếu số liệu phân tích của bạn vẫn có trình duyệt từ trước khoảng 2016, như Android WebView cũ hoặc trình duyệt trên TV. Trình duyệt duyệt danh sách src theo thứ tự và tải định dạng đầu tiên nó hỗ trợ, nên phương án dự phòng không tốn gì với khách truy cập hiện đại. Nếu đã có tệp TrueType cho máy tính, TTF sang WOFF tạo bản dự phòng đó chỉ trong một lần.

Tránh dùng TTF hoặc OTF gốc trên website trừ khi nền tảng buộc bạn, như một số trình tạo email và hệ thống nội dung cũ. Trình duyệt vẫn hiển thị tốt, nhưng tệp được truyền không nén trừ khi máy chủ gzip phông, và ai cũng có sẵn một bản cài được cho máy tính. Dòng font-display: swap bên dưới bảo trình duyệt hiển thị chữ ngay bằng phông dự phòng rồi thay bằng phông của bạn khi tải xong, thay vì ẩn chữ tới 3 giây trong lúc chờ.

Hãy lưu tệp trên tên miền của chính bạn nếu có thể. Chrome, Safari và Firefox hiện chia bộ nhớ đệm theo từng trang, nên phông tải từ CDN dùng chung không còn được tái sử dụng giữa các website, và tự lưu trữ còn tiết kiệm một lần tra DNS và kết nối. Chỉ thêm <link rel="preload"> cho một hoặc hai độ đậm dùng ở phần đầu trang; tải trước mọi kiểu sẽ tranh băng thông với ảnh.

Một độ đậm chữ Latin lưu dạng WOFF2 thường nặng 20–60 KB. Cùng phông đó ở dạng TTF không nén thường lớn gấp hai đến ba lần, và họ phông có thêm Hy Lạp, Kirin và tiếng Việt có thể vượt 200 KB mỗi kiểu. Phông tiếng Trung, Nhật, Hàn thuộc một quy mô khác: một độ đậm CJK đầy đủ chứa hàng chục nghìn glyph và thường lên tới vài megabyte kể cả sau khi nén WOFF2, quá nhiều để tải trước khi trang hiển thị được chữ.

Subsetting loại bỏ các ký tự mà trang không bao giờ dùng, còn unicode-range cho trình duyệt biết tệp bao phủ những ký tự nào, nên chỉ tải tệp đó khi trang thực sự có các ký tự ấy. Google Fonts dùng đúng cách này cho CJK, cắt mỗi họ phông thành nhiều lát nhỏ tải theo nhu cầu. Với phông của riêng bạn, tùy chọn Giữ ký tự trong công cụ chuyển đổi font chữ cắt tệp xuống Latin + accents hoặc Chỉ các ký tự tôi nhập trước khi lên máy chủ; hãy giữ Tất cả ký tự cho mọi thứ bạn cài trên máy tính.

TTF sang OTF và ngược lại chỉ là đổi vùng chứa đối với phông kiểu TrueType: bảng đường viền, số đo và tính năng bố cục được chuyển nguyên vẹn. Trường hợp đáng chú ý là OTF dựa trên CFF chuyển sang TTF. Đường cong bậc ba không thể sao chép vào định dạng đường viền bậc hai, nên mỗi đường cong được vẽ lại thành một hoặc nhiều đoạn bậc hai với sai số nhỏ hơn nhiều so với một điểm ảnh. Hint của PostScript cũng không thể chuyển đổi, vì vậy công cụ OTF sang TTF cung cấp Hinting với các lựa chọn Giữ, Xóa hoặc Tự động hinting.

Chuyển từ web về máy tính là kiểu chuyển đổi phổ biến nhất. Bạn tải một giao diện hoặc bộ thiết kế, chỉ thấy tệp .woff hoặc .woff2, mà cần phông trong Word hay Figma. WOFF sang TTF bỏ lớp nén và ghi lại các bảng gốc, nên glyph, kerning và tính năng giữ nguyên như ban đầu. Thứ không thể khôi phục là những gì bản web đã loại bỏ, như ký tự bị bỏ do subsetting hoặc hint bị xóa để tiết kiệm byte.

Hầu hết sự cố khi chuyển đổi bắt nguồn từ ba thứ: hinting, tính năng bố cục và trục biến thiên. Danh sách dưới đây nêu các triệu chứng bạn có thể gặp sau khi chuyển và nguyên nhân thường gặp của từng triệu chứng.

Tệp phông là một cơ sở dữ liệu nhỏ, và ba phần của nó trả lời hầu hết câu hỏi. Bảng name chứa tên họ phông, tên kiểu, phiên bản, dòng bản quyền và thường cả URL giấy phép; Font Book trên macOS hiển thị trong chế độ xem thông tin, còn bản xem trước phông của Windows hiển thị vài dòng đầu. Độ phủ glyph cho biết phông dàn được những ngôn ngữ nào: phông chỉ có Latin sẽ lặng lẽ chuyển sang kiểu chữ khác với các ký tự tiếng Ba Lan, Thổ Nhĩ Kỳ hay tiếng Việt mà nó thiếu. Với phông biến thiên, bảng fvar liệt kê các trục, như độ đậm từ 100 đến 900 hoặc độ rộng từ 75 đến 125.

Giấy phép đáng xem qua một lần trước khi đưa bất cứ thứ gì lên mạng. Các hãng phông thương mại thường bán riêng giấy phép máy tính, web và ứng dụng; giấy phép máy tính thường cho cài trên một số máy nhất định nhưng không cho phép phân phối tệp tới khách truy cập website hay đóng gói vào ứng dụng di động. Chuyển đổi phông chỉ đổi định dạng tệp, không bao giờ đổi giấy phép, nên WOFF2 tạo từ TTF máy tính mang cùng điều khoản với TTF đó. Phông theo SIL Open Font License, bao gồm phần lớn Google Fonts, có thể được chuyển đổi, subset và tự lưu trữ.

Hầu hết câu hỏi về phông chữ quy về nơi tệp sẽ được dùng. Nếu cài trên máy tính hoặc đóng gói trong ứng dụng, hãy dùng TrueType hoặc OpenType; nếu trình duyệt tải về, hãy dùng các lớp bao web đã nén. Bảng dưới đây ghép các công việc phổ biến với định dạng nên chọn và cách chuyển đổi để có được nó, để bạn bỏ qua lịch sử và đến thẳng tệp cần dùng.

Hai công việc nằm giữa các nhóm. EPUB 3 chấp nhận TTF, OTF và WOFF, nên ebook có thể dùng cả hai họ định dạng, còn tệp phông SVG cùng dòng với đồ họa vector nhưng ngày nay chủ yếu quan trọng với một số phần mềm máy vẽ và khắc, chứ không phải trình duyệt.