Trong CSS3 font-face , có nhiều loại phông chữ bao gồm như ttf, eot, woff, svgvà cff.
Tại sao chúng ta nên sử dụng tất cả các loại này?
Nếu chúng đặc biệt đối với các trình duyệt khác nhau, tại sao số lượng chúng lại lớn hơn số lượng các trình duyệt web chính?
Câu trả lời:
Chỉ sử dụng WOFF2 hoặc nếu bạn cần hỗ trợ cũ, WOFF. Không sử dụng bất kỳ định dạng nào khác
( svgvà eotlà các định dạng chết ttfvà otflà phông chữ toàn hệ thống và không nên được sử dụng cho mục đích web)
Nói tóm lại, mặt chữ rất cũ, nhưng chỉ gần đây mới được hỗ trợ bởi nhiều hơn IE.
eot là cần thiết cho Internet Explorers cũ hơn IE9 - họ đã phát minh ra thông số kỹ thuật, nhưng eot là một giải pháp độc quyền.
ttfvà otflà các phông chữ cũ bình thường, vì vậy một số người cảm thấy khó chịu vì điều này có nghĩa là bất kỳ ai cũng có thể tải xuống các phông chữ đắt tiền để cấp phép miễn phí.
Thời gian trôi qua, SVG 1.1 bổ sung một chương "phông chữ" giải thích cách mô hình hóa phông chữ hoàn toàn bằng cách sử dụng đánh dấu SVG và mọi người bắt đầu sử dụng nó. Nhiều thời gian trôi qua và hóa ra chúng hoàn toàn khủng khiếp so với chỉ một định dạng phông chữ bình thường và SVG 2 đã khôn ngoan loại bỏ toàn bộ chương một lần nữa.
Sau đó, woffđược phát minh bởi những người có khá nhiều kiến thức về miền, điều này có thể lưu trữ phông chữ theo cách loại bỏ các bit rất quan trọng để cài đặt hệ thống, nhưng không liên quan đến web (khiến mọi người lo lắng về vi phạm bản quyền) và cho phép nén nội bộ để phù hợp hơn với nhu cầu của web (làm cho người dùng và máy chủ hài lòng). Điều này trở thành định dạng ưa thích.
Chỉnh sửa 2019 Một vài năm sau, woff2được soạn thảo và chấp nhận, điều này giúp cải thiện việc nén, dẫn đến các tệp thậm chí nhỏ hơn, cùng với khả năng tải một phông chữ "trong các phần" để một phông chữ hỗ trợ 20 tập lệnh có thể được lưu trữ dưới dạng "khối "Trên đĩa thay vào đó, với các trình duyệt tự động có thể tải phông chữ" theo từng phần "khi cần, thay vì cần chuyển toàn bộ phông chữ lên phía trước, cải thiện hơn nữa trải nghiệm sắp chữ.
Nếu bạn không muốn hỗ trợ IE 8 trở xuống và iOS 4 trở xuống và Android 4.3 trở về trước, thì bạn chỉ có thể sử dụng WOFF (và WOFF2, WOFF được nén cao hơn, cho các trình duyệt mới nhất hỗ trợ nó.)
@font-face {
font-family: 'MyWebFont';
src: url('myfont.woff2') format('woff2'),
url('myfont.woff') format('woff');
}Hỗ trợ woffcó thể được kiểm tra tại http://caniuse.com/woff
hỗ trợ woff2có thể được kiểm tra tại http://caniuse.com/woff2
woff... có chế độ ngăn chặn mọi người vi phạm bản quyền ? Làm thế nào trên trái đất có thể / không hoạt động?
Woff là một hình thức nén (nén) của phông chữ TrueType - OpenType. Nó nhỏ và có thể được gửi qua mạng như một tệp đồ họa. Quan trọng nhất, cách này phông chữ được bảo toàn hoàn toàn bao gồm các bảng quy tắc kết xuất mà rất ít người quan tâm vì chúng chỉ sử dụng tập lệnh Latin.
Hãy xem [URL đã xóa]. Phông chữ bạn nhìn thấy là một web thử nghiệm được phân phối smartfont (woff) có hàng ngàn ký tự kết hợp tạo thành các hình dạng phức tạp. Các văn bản cơ bản là mã Latin đơn giản của tiếng La-tinh Singhala. (Sao chép và dán vào Notepad và xem).
Chỉ woff mới có thể làm điều này bởi vì không ai có phông chữ này và nó được nhìn thấy ở bất cứ đâu (Mac, Win, Linux và thậm chí trên điện thoại thông minh bởi tất cả các trình duyệt ngoại trừ IE. IE không hỗ trợ đầy đủ cho Loại mở).
WOFF 2.0, dựa trên thuật toán nén Brotli và các cải tiến khác so với WOFF 1.0 giúp giảm hơn 30% kích thước tệp, được hỗ trợ trong Chrome, Opera và Firefox.
http://en.wikipedia.org/wiki/Web_Open_Font_Format http://en.wikipedia.org/wiki/Brotli
http://sth.name/2014/09/03/Speed-up-webfonts/ có một ví dụ về cách sử dụng nó.
Về cơ bản, bạn thêm url src vào tệp woff2 và chỉ định định dạng woff2. Điều quan trọng là phải có điều này trước định dạng woff: trình duyệt sẽ sử dụng định dạng đầu tiên mà nó hỗ trợ.