0

Cách đổi định dạng font chữ cho web

really fast

Giới thiệu định dạng font woff và woff2

WOFF (viết tắt Web Open Font Format) là một định dạng font chữ cho web được phát triển bởi Mozilla cùng với Type Supply, LettError và một số tổ chức khác. WOFF sử dụng phiên bản nén với cùng định dạng sfnt sử dụng bởi TrueType, OpenType và Open Font Format, nhưng lại thêm vào các dữ liệu mô tả và một phần định dạng riêng của mình, bao gồm các trường định nghĩa cho phép nhà sản xuất/phân phối thêm vào các thông tin bản quyền nếu muốn.

Có 3 lợi ích chính cho việc sử dụng WOFF:

  1. Dữ liệu font được nén lại, do đó website dùng WOFF sẽ tốn ít băng thông hơn, tải nhanh hơn so  với sử dụng TrueType hay OpenType. Nhờ đó hiệu năng trang web cũng sẽ tốt hơn.
  2. Các nhà sản xuất dễ dàng thêm thông tin bản quyền vào font, đem lại tính khả dụng và an toàn, tránh các rắc rối pháp lý không cần thiết cho người sử dụng như desinger, developer, web owner,…
  3. Cả trình duyệt độc quyền và trình duyệt tự do (miễn phí) đều ưa thích WOFF, hầu hết đều hỗ trợ WOFF, vì vậy rất có tiềm năng nó sẽ là định dạng font phổ biến nhất trên Internet, không giống những định dạng cũ khác.

Có hai phiên bản của WOFF là: WOFF và WOFF2, chúng chỉ khác nhau ở thuật toán nén. WOFF2 sẽ có kết quả nén tốt hơn (40% so với WOFF). Dùng trong @font-face, ta khai báo định dạng của chúng tương ứng “woff”  và “woff2”. Lưu ý woff2 có tỉ lệ nén tốt hơn, nhưng chưa hỗ trợ bởi nhiều trình duyệt như woff, do đó bạn nên cân nhắc sử dụng trong thời gian hiện tại.

Các bạn có thể kiểm tra tương thích trình duyệt của woff2 ở đây  và woff ở đây.u

 

humanCấp độ: Bình thường

Lưu ý: Bài viết hướng dẫn thực hiện trên linux (Ubuntu, CentOS). Trên windows, có thể các bạn dùng Visual Studio để biên dịch.

Hướng dẫn convert file otf (OpenType), ttf (True Type) sang WOFF

Download chương trình đổi định dạng ‘sfnt2woff’

Tải về tại đây https://people.mozilla.org/~jkew/woff/

Thực hiện biên dịch chương trình

Với chương trình này không có configure, hay install, chỉ cần gọi lệnh make là đã biên dịch xong và có thể sử dụng.

Cách sử dụng

Để convert file otf hay ttf, gõ dòng lệnh sau

Kết quả sẽ cho ra file woff đã được nén.

Hướng dẫn convert file otf (OpenType), ttf (True Type) sang WOFF2

Download chương trình đổi định dạng ‘woff2’

Tải về tại đây https://github.com/google/woff2

Hầu hết Ubuntu và CentOS đều cài sẵn git để sử dụng, nếu dòng lệnh báo lỗi không có lệnh git thì có thể cài đặt git bằng lệnh:

Thực hiện biên dịch chương trình

Tool này được phát triển bởi Google, cũng không có configure, hay install, chỉ cần gọi lệnh make là đã biên dịch xong và có thể sử dụng.

Cách sử dụng

Để convert file otf hay ttf, gõ dòng lệnh sau

Kết quả sẽ cho ra file woff đã được nén.

 

Chuyển đổi hàng loạt fonts (multiple times)

Nếu bạn có một thư mục lớn với rất nhiều font cần được convert thì 2 tool nhỏ sau sẽ rất hữu ích cho bạn. Chỉ cần gõ lệnh 1 lần để chuyển đổi hàng nghìn font của bạn

run_woff.sh – dùng cho convert woff

Download về tại https://gist.github.com/nhtua

Copy file run_woff.sh đặt vào thư mục woff bạn vừa biên dịch ở trên, gõ dòng lệnh để convert:

run_woff2.sh – dùng cho convert woff2

Download về tại https://gist.github.com/nhtua

Copy file run_woff2.sh vào thư mục woff2 vừa biên dịch ở trên, gõ lệnh để convert multiple fonts:

Chúc các bạn thành công!

Bình luận với Facebook

Hoàng Tựa

Yêu thích lập trình web và tạo ra những thứ đẹp đẽ.

Leave a Reply

Your email address will not be published. Required fields are marked *