Chuyển đổi Font

Chuyển font web và desktop giữa TTF, OTF, WOFF và WOFF2 — ngay trên trình duyệt, kèm xem trước trực tiếp. Hoàn hảo để lấy .woff2 cho website từ một file .ttf/.otf. Tab Soi font đọc chính các bảng bên trong font, kể cả các trục của variable font, và cho bạn kéo thử từng trục ngay tại chỗ.

Các bước sử dụng

1. Kéo-thả file font (.ttf, .otf, .woff, .woff2). Định dạng nhận diện sẽ hiển thị.
2. Xem trước font được render trực tiếp.
3. Chọn định dạng đích: WOFF2 (nhỏ nhất, tốt cho web), WOFF (web cũ), hoặc TTF/OTF (không nén).
4. Bấm Chuyển & tải về.
5. Sau khi đã nạp font, cạnh tên file sẽ hiện nút chuyển Chuyển đổi / Soi font. Gạt sang Soi font để đọc chính nội dung font thay vì đóng gói lại nó.
6. Lần lượt xem báo cáo: Tổng quan (Phiên bản SFNT, Outline, Số glyph, Đơn vị trên em, số bảng, ngày tạo và ngày sửa, khung bao), Bảng name (họ font, kiểu, phiên bản, tác giả, nội dung giấy phép), Font variable (fvar, STAT, avar, gvar) (chỉ xuất hiện khi font có ít nhất một trong các bảng đó), Metric & kiểu dáng (ascender/descender/lineGap của hhea, các chỉ số typo và win của OS/2, lớp độ đậm và độ rộng, x-height, cap height, mã nhà cung cấp, góc nghiêng, cờ font đều nét, vị trí gạch chân và các cờ kiểu chữ), Quyền nhúng (fsType) (chỉ hiện khi font có bảng OS/2), Ánh xạ ký tự (cmap), Tính năng OpenType và Danh mục bảng.
7. Trong thẻ Font variable (fvar, STAT, avar, gvar), phần tóm tắt trên cùng đếm số trục thiết kế và số instance được đặt tên, đồng thời cho biết có STAT, avar, gvar hay không. Bảng Trục thiết kế (fvar) liệt kê từng trục: tag bốn ký tự, tên do chính font đặt, giá trị nhỏ nhất – mặc định – lớn nhất, và đơn vị. Năm trục chuẩn (wght, wdth, slnt, ital, opsz) được gắn nhãn đã đăng ký; mọi trục khác là trục tự định nghĩa và hiện theo đúng tên riêng của nó. Trục gắn nhãn ẩn vẫn tồn tại nhưng font đề nghị các phần mềm thiết kế đừng hiện nó, còn trục gắn nhãn avar là trục bị ánh xạ lại phi tuyến.
8. Kéo các thanh trượt trong Xem trước trục trực tiếp để đổi giá trị trục theo thời gian thực, hoặc bấm một instance để nhảy thẳng tới nó; nút Đặt lại mặc định đưa mọi trục về mặc định. Dòng font-variation-settings bên dưới chính là đoạn CSS tạo ra thứ bạn đang nhìn thấy, chép về dùng được ngay.
9. Named instance là danh sách các vị trí đã được nhà thiết kế đặt tên — Thin, Condensed Bold… — kèm toạ độ chính xác và tên PostScript của từng cái. Bản ghi trục STAT và Giá trị trục STAT là dữ liệu hệ điều hành đọc để liên kết các kiểu chữ trong cùng một họ; Bản đồ đoạn avar cho thấy phần ánh xạ phi tuyến (nếu có); còn các con số gvar nói bao nhiêu glyph thực sự biến đổi hình dáng.
10. Trong Ánh xạ ký tự (cmap), hãy đọc danh sách subtable trước — nền tảng, bảng mã, định dạng và mỗi bảng ánh xạ bao nhiêu điểm mã — rồi tới bảng độ phủ khối Unicode bên dưới; bảng này đọc từ subtable đầy đủ nhất và cho biết font thực sự chứa bao nhiêu ký tự trong từng khối.
11. Trong Tính năng OpenType, các tag GSUB và GPOS được liệt kê kèm tên gọi dễ hiểu, nên liga, kern, onum… cho bạn biết font này thực sự làm được những gì.

Mẹo

• Cho website, WOFF2 cho file nhỏ nhất với hỗ trợ rộng trên trình duyệt hiện đại.
• WOFF và WOFF2 chỉ là lớp bao nén quanh cùng dữ liệu font — chuyển sang chúng không mất mát.
• Lần chuyển WOFF2 đầu tải engine nhỏ (~1MB) một lần; các lần sau tức thì.
• Các trục của variable font được đọc đầy đủ. fvar cho bạn mọi trục kèm dải giá trị và mọi instance được đặt tên, STAT cho dữ liệu liên kết kiểu chữ, avar cho phần ánh xạ phi tuyến, còn gvar cho biết thực sự có bao nhiêu glyph biến đổi. Thả một font như Roboto Flex vào là thẻ này mở ra với mười ba trục thiết kế.
• Variable font không có bảng STAT sẽ bị cảnh báo. Trình duyệt vẫn render bình thường, nhưng Windows và macOS dùng STAT để liên kết kiểu chữ và đặt tên instance, nên khi cài vào máy thì họ font hay bị gom nhóm hoặc đặt tên sai.
• gvar mới là phép thử thật xem font có thực sự biến thiên hay không: một font hoàn toàn có thể khai báo trục mà chẳng chứa delta outline nào. Hãy để ý con số glyph có biến thiên. Với variable font CFF/OTF thì không có gvar là đúng — biến thiên nằm trong CFF2 — và công cụ sẽ ghi rõ điều đó thay vì cảnh báo.
• Các trục ẩn vẫn được hiện chứ không bị bỏ qua. Roboto Flex ẩn tám trục tham số (XOPQ, YTLC…) khỏi phần mềm thiết kế, nhưng chúng là thật và ở đây bạn vẫn kéo được.
• avar là lý do độ đậm 500 không phải lúc nào cũng nằm chính giữa 400 và 900. Nếu một trục bị gắn nhãn avar trong bảng trục, giá trị của nó bị bẻ cong trước khi nội suy, và bảng segment map cho thấy chính xác bẻ như thế nào.
• Mỗi bảng được phân tích độc lập, nên một bảng hỏng không làm sập cả báo cáo — nó chỉ khiến mục tương ứng biến mất và được ghi vào thẻ Những gì không đọc được kèm lý do. Một báo cáo có thẻ lỗi vẫn là báo cáo dùng được, và thẻ đó nói rõ bạn đang thiếu chính xác thứ gì.
• Mục fsType trong thẻ Quyền nhúng (fsType) là tuyên bố ý định của chính font, không phải giấy phép. Hãy đọc nội dung giấy phép trong Bảng name trước khi nhúng hay subset font.
• Khi soi một file WOFF hoặc WOFF2, nó được giải nén trước, nên mọi dung lượng trong báo cáo là dung lượng SFNT sau giải nén chứ không phải số byte của file bạn thả vào. WOFF2 còn dựng lại glyf và loca trong lúc giải nén, và lần đầu mở tab Soi font sẽ tải engine ~1 MB.
• x-height và cap height cần bảng OS/2 từ phiên bản 2 trở lên; font cũ hơn ghi cần OS/2 v2 trở lên thay vì hiện một con số bịa ra.

Câu hỏi thường gặp

Có chuyển TTF sang OTF (và ngược lại) không?

Công cụ giữ nguyên loại outline của font (TrueType glyf vs PostScript CFF) và đóng gói lại phần chứa. Nó không tái mã hoá outline, nên font TrueType vẫn là TrueType (tải về .ttf) và font CFF vẫn là CFF (.otf). Chuyển đổi outline thật là thao tác khác và có mất mát.

Soi font có cho biết font có những trục variable nào không?

Có. Thẻ Font variable (fvar, STAT, avar, gvar) liệt kê mọi trục kèm tag, tên, giá trị nhỏ nhất, mặc định và lớn nhất, đánh dấu trục chuẩn và trục ẩn, đồng thời liệt kê mọi instance đặt tên kèm toạ độ. Nó cũng đọc STAT (axis record và axis value, đủ định dạng 1 đến 4, kèm tên fallback bị lược bỏ), avar (các segment map, để bạn thấy phần ánh xạ phi tuyến) và gvar (bao nhiêu glyph mang dữ liệu biến thiên).

Tôi thử được các trục trước khi tải font về không?

Được — Xem trước trục trực tiếp cho bạn mỗi trục một thanh trượt, mỗi instance một nút bấm, và in ra đoạn CSS font-variation-settings tương ứng ngay khi bạn kéo. Nó cần trình duyệt hỗ trợ variable font; nếu trình duyệt của bạn không hỗ trợ, thẻ sẽ báo rõ và mọi con số đã phân tích vẫn còn nguyên ở đó.

Công cụ cảnh báo variable font của tôi không có bảng STAT. Vậy font hỏng à?

Với trình duyệt thì không — chỉ fvar là đủ cho CSS. Nhưng STAT mới là thứ Windows và macOS đọc để liên kết các kiểu chữ trong một họ và đặt tên cho instance, nên font thiếu nó thường hiển thị lộn xộn trong menu font của các phần mềm desktop. Hầu hết công cụ dựng font hiện đại đều tự sinh STAT.

Một phần báo cáo bị thiếu và có thẻ "Những gì không đọc được".

Đó là thiết kế có chủ đích. Mỗi bảng được phân tích độc lập nên bảng thiếu hoặc hỏng chỉ làm mất đúng phần của nó và được liệt kê kèm lý do thất bại, thay vì làm hỏng toàn bộ báo cáo.

Vì sao dung lượng trong tab Soi font lớn hơn file của tôi?

Vì file WOFF hoặc WOFF2 được giải nén trước khi phân tích. Mọi con số trong báo cáo mô tả phần SFNT chưa nén — nơi các bảng thực sự nằm.

Tôi dùng đây để kiểm tra font có được nhúng vào PDF hay không được không?

Nó cho bạn giá trị fsType của chính font và ý nghĩa của giá trị đó, tức là tín hiệu kỹ thuật mà các công cụ PDF đọc. Còn câu trả lời có tính ràng buộc thì nằm trong giấy phép, mà bạn tìm thấy dưới dạng văn bản ngay trong Bảng name.

Font có bị tải lên không?

Không — nhận diện, chuyển đổi, xem trước và soi font đều chạy cục bộ trên trình duyệt.