Chính xác thì phông chữ web là gì và chuyển đổi thành cái gì liên quan?

Tôi đã đọc một vài bài viết về điều này nhưng sự khác biệt kỹ thuật thực tế giữa phông chữ web và phông chữ trên máy tính để bàn vẫn còn lảng tránh tôi. Càng đọc về chủ đề này, tôi càng có cảm giác rằng không ai có một định nghĩa kỹ thuật rõ ràng về chính xác một webfont là gì.

Khi tôi tải phông chữ "máy tính để bàn" lên một dịch vụ tạo webfont như FontSquirrel, chính xác những dịch vụ đó đã làm gì với tệp phông chữ để biến nó thành phông chữ web? Nếu việc sử dụng chính của các dịch vụ này là chuyển đổi sang các định dạng khác nhau, những định dạng nào thực sự cần thiết trên web hiện đại để hỗ trợ số lượng trình duyệt hợp lý kể từ năm 2019?

"Phông chữ web" chỉ là một phông chữ được sử dụng trên web hoặc trên trình duyệt. Những gì các trình tạo phông chữ web này làm chỉ là làm cho cuộc sống của bạn dễ dàng hơn bằng cách cung cấp cho bạn css cần thiết để phục vụ phông chữ cho khách truy cập và chuyển đổi phông chữ của bạn sang tất cả các định dạng tệp bạn cần để đảm bảo phông chữ hoạt động trên trình duyệt chéo.

Một số phông chữ được coi là "an toàn web" đơn giản bằng cách phổ biến đến mức mọi máy tính đều có chúng, như "Arial". Bạn không cần phải làm gì ngoài việc bảo trang web sử dụng phông chữ đó. Các phông chữ web cần được tải xuống bởi trình duyệt của khách truy cập vì nếu một phông chữ không có trên máy tính của bạn, bạn sẽ không nhìn thấy nó.

Các định dạng phông chữ được phát triển riêng cho web, như Woff được thiết kế với kích thước tệp nhỏ. Phông chữ Google cũng cung cấp cho bạn các định dạng khác nhau theo cách này, nó chỉ bị ẩn một chút.

Điều khá quan trọng cần lưu ý là một số phông chữ có thể có giấy phép phông chữ web riêng biệt mà bạn có thể không có ngay cả khi bạn sở hữu các tệp phông chữ. Giống như hình ảnh google ... Chỉ vì bạn có thể tải xuống hình ảnh, không có nghĩa là bạn có thể sử dụng nó để bán dư chấn của công ty bạn.

Developers.google.com có một bài tốt mà tập trung vào việc tối ưu hóa phông chữ web, nhưng có điều gì đó về những điều cơ bản quá.

Có một đoạn trích khá hay về các định dạng khác nhau trong bài viết đó:

Ngày nay có bốn định dạng chứa phông chữ được sử dụng trên web: EOT, TTF, WOFF và WOFF2. Thật không may, mặc dù có nhiều lựa chọn, nhưng không có một định dạng phổ quát nào hoạt động trên tất cả các trình duyệt cũ và mới: EOT chỉ dành cho IE, TTF có hỗ trợ IE một phần, WOFF thích hỗ trợ rộng nhất nhưng không có sẵn trong một số trình duyệt cũ hơn và hỗ trợ WOFF 2.0 là một công việc đang tiến triển đối với nhiều trình duyệt.

Vì vậy, nơi mà để lại cho chúng tôi? Không có một định dạng duy nhất hoạt động trong tất cả các trình duyệt, điều đó có nghĩa là chúng tôi cần cung cấp nhiều định dạng để cung cấp trải nghiệm nhất quán

Transfonter cũng có một bảng khá tốt về hỗ trợ trình duyệt:

Tôi đã thực hiện một số nghiên cứu chi tiết hơn sau khi đặt câu hỏi này và vì vậy tôi đang thêm câu trả lời này dưới dạng một phần phụ lục cho Joonas ', điều này rất tốt nhưng không trả lời câu hỏi cuối cùng của tôi đủ chi tiết cho tôi:

Nếu việc sử dụng chính của các dịch vụ này là chuyển đổi sang các định dạng khác nhau, những định dạng nào thực sự cần thiết trên web hiện đại để hỗ trợ số lượng trình duyệt hợp lý kể từ năm 2019?

Nhiều nhà phát triển cho rằng WOFF và WOFF2 là các định dạng phông chữ duy nhất cần thiết trong phát triển web hiện đại . Tuy nhiên, những câu trả lời đó không có nguồn gốc rõ ràng và tôi cũng nghĩ rằng họ hơi quá nhiệt tình, vì vậy hãy bắt đầu bằng cách xem các số liệu hỗ trợ thực tế cho WOFF và WOFF2, theo CanIUse.com, là tiêu chuẩn công nghiệp để ghi lại điều này loại điều

Hỗ trợ cho WOFF2

WOFF2 cải thiện trên WOFF theo mọi cách, được hỗ trợ bởi hầu hết các trình duyệt máy tính để bàn được phát hành sau năm 2014, nhưng chỉ từ năm 2018 mới bắt đầu được hầu hết các trình duyệt di động hỗ trợ. Nó được hỗ trợ bởi ước tính 93% trình duyệt trên toàn cầu.

Hỗ trợ cho WOFF

WOFF bắt đầu được hỗ trợ bởi Internet Explorer trong IE9 (phát hành năm 2011), trong đó ám chỉ rằng định dạng EOT lỗi thời cho các phiên bản của IE phát hành từ năm 2011. Nó được hỗ trợ bởi một ước tính 97% các trình duyệt trên toàn cầu.

Các trình duyệt máy tính để bàn khác bắt đầu hỗ trợ WOFF gần như cùng lúc, bao gồm Firefox kể từ Firefox 3.6, Chrome kể từ Chrome 5 và Safari kể từ 5.1 (lần lượt phát hành năm 2010, 2011 và 2011), khiến các định dạng TTF và OTF ¹ bị lỗi thời trong các phiên bản trước . Hầu hết các trình duyệt di động đã hỗ trợ WOFF kể từ năm 2013.

Hãy cẩn thận và kết luận

Từ quan điểm này, thật dễ dàng để viết ra tất cả các định dạng khác là không cần thiết, nhưng phần mềm không còn được hỗ trợ chính thức chưa bao giờ là một dấu hiệu tốt cho thấy nó không còn được sử dụng. Nói cách khác, chia sẻ phiên bản trình duyệt toàn cầu hoàn toàn không được đảm bảo là đại diện cho nhân khẩu học mà trang web của bạn sẽ được sử dụng.

Chia sẻ phiên bản trình duyệt có thể thay đổi đáng kể giữa các nhân khẩu học: các yếu tố như quốc gia, tầng lớp xã hội và thu nhập đều ảnh hưởng lớn đến thiết bị nào (và do đó, phiên bản trình duyệt) mà người dùng của bạn đang sử dụng. Là nhà phát triển, hãy suy nghĩ xem liệu trang web bạn đang xây dựng sẽ được sử dụng bởi nhân khẩu học có nhiều khả năng sử dụng các phiên bản cũ hơn đó.

Nếu bạn quyết định đó là trường hợp và bạn cần hỗ trợ các trình duyệt máy tính để bàn cũ hơn 2011 hoặc trình duyệt di động cũ hơn 2013, hãy sử dụng ngăn xếp phông chữ đầy đủ: WOFF2, WOFF, TTF (hoặc OTF) và EOT.

Nếu bạn không cần phải hỗ trợ những trình duyệt cổ đại, và nó vẫn còn đúng là bạn nhiều hơn khả năng không, chỉ cần sử dụng WOFF2 và WOFF như ngăn xếp nhóm phông chữ từ hiểm.

_{(1) TTF và OTF là các định dạng phông chữ truyền thống và bất kỳ trình duyệt nào hỗ trợ cái này đều hỗ trợ cái kia, vì vậy đừng bao giờ sử dụng cả hai}

Không nhiều.

WOFF không có gì khác ngoài định dạng nén cho TTF, dẫn đến kích thước nhỏ hơn. Nội bộ không thay đổi. WOFF2 đi xa hơn một chút, nó sẽ sửa đổi biểu diễn phông chữ một chút để tăng cường nén hơn một chút. EOT, là định dạng chỉ dành cho MS, hoàn toàn không được tính. SVG thực tế chỉ là các đường viền, hầu như không nhiều hơn, vì vậy nó không được tính là một phông chữ thực sự, chỉ sử dụng nó cho các biểu tượng, nếu có.

Chỉ cần sử dụng WOFF và được thực hiện với nó. Nếu bạn muốn vắt kiệt byte cuối cùng, bạn cũng có thể muốn cung cấp WOFF2 nhưng sự khác biệt sẽ không đáng kể.

Tôi muốn nhấn mạnh một cái gì đó thực sự cơ bản, mặc dù: "webfont", chi tiết triển khai kỹ thuật sang một bên, là một phông chữ bạn đã được cấp phép, bởi người tạo hoặc chủ bản quyền cho nhiệm vụ cụ thể sử dụng trên trang web. Và chúng sẽ có định dạng webfont. Nếu bạn đang ngồi trước máy phát điện để chuyển đổi phông chữ sang định dạng webfont và nó không phải là nguồn mở hoặc do bạn tự vẽ, hãy dừng ngay tại đó! Bạn gần như chắc chắn vi phạm giấy phép và có thể bị kiện. Và vì trên web, mọi người dễ dàng tìm thấy những gì bạn đang làm và kiểm tra danh sách bán hàng của họ.

Xem ví dụ doofus này , người đã làm việc cho Facebook và Google, người đã không nhận ra cho đến khi ai đó nói với anh ta rằng anh ta đang sử dụng một phông chữ lậu trên trang web của mình. Anh ta có giấy phép đăng ký máy tính để bàn, nhưng đó không phải là giấy phép sử dụng web.