Chuyển TTF sang WOFF2

Muốn tự lưu trữ font chữ trên website thì hãy bắt đầu từ đây: WOFF2 là định dạng mà mọi trình duyệt hiện nay ưu tiên tải về, đồng thời là lớp đóng gói nhỏ gọn nhất cho dữ liệu TrueType bạn đang có. Trang này cũng tạo sẵn quy tắc CSS để tải font đó.

hoặc thả tệp TTF, OTF, WOFF … vào đây ·

Tối đa 95 MB mỗi tệp· Tối đa 20 tệp· Xóa sau 30 phút

Đầu ra

Chuyển sang

Tệp được xử lý trên máy chủ của chúng tôi và bị xóa sau 30 phút.

Cách sử dụng công cụ này

1
Tải lên các file TTF
Thêm mọi độ đậm và kiểu chữ bạn định dùng, tối đa 20 tệp, mỗi tệp tối đa 95 MB. TTF biến thiên (variable) cũng dùng được và vẫn giữ nguyên các trục.
2
Giữ tùy chọn CSS, tạo tập con nếu có thể
Tùy chọn Kèm CSS @font-face đã được tick sẵn. Trong Cài đặt nâng cao, đặt Giữ ký tự thành Basic Latin hoặc Latin + dấu nếu trang web của bạn dùng ngôn ngữ phương Tây, và cân nhắc đặt Hinting thành Remove.
3
Chuyển sang WOFF2
Nhấn Chuyển sang WOFF2 rồi tải các font về cùng tệp .css. Tải cả hai lên trang web của bạn, sau đó liên kết stylesheet hoặc dán quy tắc vào CSS của riêng bạn.

Trả lời

Làm thế nào để chuyển TTF sang WOFF2 cho trang web của tôi?

Tải tệp .ttf lên, để nguyên tùy chọn Kèm CSS @font-face đã tick và nhấn Chuyển sang WOFF2. Bạn nhận được tệp .woff2 cùng một tệp .css chứa quy tắc @font-face trỏ tới nó.

Vì sao nên dùng WOFF2 làm định dạng web font

TTF là dữ liệu bảng chưa nén: đường viền, số đo, kerning, tên. WOFF2, được công bố thành Khuyến nghị của W3C năm 2018, giữ đúng các bảng đó nhưng nén chúng bằng Brotli, thuật toán nén Google phát hành năm 2015, sau khi sắp xếp lại đường viền glyph để nén tốt hơn. Các thử nghiệm của chính Google cho thấy WOFF2 nhỏ hơn định dạng WOFF cũ khoảng 30% tính trung bình, và trình duyệt khôi phục dữ liệu font gốc sau khi tải, nên hình dạng chữ không thay đổi.

Font làm chặn việc hiển thị, nên kích cỡ của chúng quan trọng hơn con số kilobyte gợi ý. Cho đến khi font web tải xong, trình duyệt hoặc ẩn văn bản hoặc hiển thị font dự phòng, và việc thay font muộn có thể làm dịch bố cục. Tệp nhỏ hơn thu hẹp khoảng thời gian đó, và hai tùy chọn ở đây thu hẹp thêm: Giữ ký tự loại bỏ các glyph mà trang của bạn không bao giờ hiển thị, còn Hinting đặt thành Remove bỏ các chỉ dẫn mà điện thoại và màn hình mật độ cao vốn bỏ qua. Hãy giữ các bản TTF gốc để dùng trên máy tính; WOFF2 sang TTF có thể giải nén font web sau này, nhưng không thể khôi phục các glyph đã bị loại khi tạo tập con.

So sánh dung lượng TTF và WOFF2

TTF, đầy đủ bộ ký tự

100%

Bảng font chưa nén, như khi cài trên máy tính

Thường gặp với font văn bản đa hệ chữ

WOFF2, tập con Basic Latin

thường 10–25%

Nén Brotli cộng ít glyph hơn; thay đổi tùy font

Quy tắc @font-face cho font WOFF2

Quy tắc ví dụ; hãy thay tên, và bỏ unicode-range nếu bạn không tạo tập con

@font-face {
  font-family: "Brand Sans";
  src: url("/fonts/brand-sans-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF;
}

Mức hỗ trợ WOFF2 trên trình duyệt qua từng phiên bản

2014
Chrome 36
Trình duyệt của Google là trình duyệt đầu tiên giải mã WOFF2 theo mặc định.
2015
Firefox 39
Mozilla bật giải mã WOFF2 theo mặc định.
2016
Edge 14
Edge gốc của Microsoft thêm WOFF2 cùng bản Windows 10 Anniversary Update.
2018
Khuyến nghị của W3C
Đặc tả được hoàn tất; đến lúc đó Safari trên macOS và iOS cũng đã giải mã được WOFF2.

TTF

Phông chữ TrueType

TTF là định dạng phông chữ TrueType do Apple phát triển vào cuối thập niên 1980 và phát hành năm 1991, sau đó cấp phép cho Microsoft. Định dạng mô tả đường nét ký tự bằng đường cong bậc hai và chứa chỉ dẫn hinting giúp chữ hiển thị sắc nét trên màn hình. TrueType được mọi hệ điều hành máy tính, trình soạn thảo văn bản và ứng dụng thiết kế hỗ trợ. Định dạng thiếu một số tính năng typography nâng cao của OpenType và lớn hơn các định dạng phông chữ web.

Nén: Không mất dữ liệu
Độ trong suốt: –
Ảnh động: –
Ra mắt: 1991 · Apple

Công cụ chuyển đổi TTF

WOFF2

Phông chữ web WOFF2

WOFF2 là phiên bản thứ hai của Web Open Font Format, dựa trên thuật toán nén Brotli của Google và được công bố thành W3C Recommendation năm 2018. Tệp nhỏ hơn WOFF khoảng 30%, giúp trang tải nhanh hơn. Mọi trình duyệt hiện đại đều hỗ trợ WOFF2, và đây là định dạng được khuyến nghị cho phông chữ web. Hệ điều hành máy tính và ứng dụng thiết kế không cài trực tiếp được định dạng này.

Nén: Không mất dữ liệu
Độ trong suốt: –
Ảnh động: –
Ra mắt: 2018 · W3C (Google)

Công cụ chuyển đổi WOFF2

TTF sang WOFF2 đóng gói font dành cho máy tính vào định dạng nén Brotli mà trình duyệt ưa chuộng, nên cùng các glyph đến tay khách truy cập với ít byte hơn; trang chiều ngược lại dành cho người cần cài một font tìm thấy trên web.

Câu hỏi thường gặp về chuyển TTF sang WOFF2

Có cần giữ TTF hoặc WOFF làm dự phòng bên cạnh WOFF2 không?

Với các trang web công khai hiện nay thì thường là không cần. Chrome, Edge, Firefox và Safari đã đọc được WOFF2 từ nhiều năm, còn số ít trình duyệt không hỗ trợ, như Internet Explorer 11, hiếm khi đáng để thêm một tệp. Chỉ thêm kết quả từ TTF sang WOFF làm mục src thứ hai nếu số liệu phân tích cho thấy vẫn có khách truy cập như vậy.

Vì sao font WOFF2 của tôi vẫn nặng hơn 100 KB?

Nén chỉ làm nhỏ cách lưu các glyph, không làm giảm số lượng glyph. Một font bao gồm Latin, Cyrillic, Hy Lạp và tiếng Việt sẽ chứa tất cả các bộ đó. Tạo tập con (subset) theo các hệ chữ bạn thực sự hiển thị mới đưa font văn bản xuống còn vài chục kilobyte.

font-display: swap có tác dụng gì?

Nó yêu cầu trình duyệt hiển thị văn bản bằng font dự phòng ngay lập tức, rồi thay bằng font web của bạn khi tải xong, thay vì ẩn văn bản trong lúc tải. Thêm nó vào quy tắc @font-face như ví dụ ở trên, hoặc dùng optional nếu bạn muốn bỏ qua việc thay font muộn trên kết nối chậm.

Có thể chuyển TTF của Google Fonts sang WOFF2 để tự lưu trữ không?

Được. Các họ font của Google Fonts được phát hành theo SIL Open Font License hoặc Apache License, cả hai đều cho phép chuyển đổi và tự lưu trữ. Tự lưu trữ tệp cũng giúp tránh một yêu cầu tới máy chủ bên thứ ba.

WOFF2 có dùng được trong email newsletter không?

Chỉ trên một số ứng dụng. Apple Mail và Mail trên iOS tải font web qua @font-face, trong khi Gmail và hầu hết phiên bản Outlook bỏ qua chúng và hiển thị font dự phòng. Hãy luôn khai báo một font hệ thống an toàn trong danh sách font của email.

Chuyển TTF sang WOFF2

Chuyển đổi phông chữ

Cách sử dụng công cụ này

Tải lên các file TTF

Giữ tùy chọn CSS, tạo tập con nếu có thể

Chuyển sang WOFF2