2016-03-19 16 views
16

Cho đến bây giờ, tôi đã sử dụng Paul Irish của bulletproof font-face syntaxCó phải eot, ttf và svg vẫn cần thiết trong khai báo phông chữ?

Nhưng tôi chỉ nhìn vào sự hỗ trợ cho .woff và các tập tin .woff2 trên caniuse và nó nói WOFF được hỗ trợ trong IE9 +. Hầu hết các bài viết về chủ đề này là từ khoảng năm 2009, mà tại thời điểm viết bài này là 7 năm trước. Chúng ta có thực sự cần phải tiếp tục tuyên bố ttf, otf, eot và svg khi woff bây giờ có được sự ủng hộ rộng rãi như vậy không?

Trả lời

29

Câu trả lời ngắn gọn: không.

EOT là chỉ thích hợp cho IE8 và dưới đây (mặc dù như đố:. Tất cả các con đường xuống IE4 IE phông chữ web thực sự đi tiên phong), và SVG phông chữ như công nghệ (không nên nhầm với phông chữ OpenType với SVG phác thảo) were abandoned bởi vì những hạn chế đã mất trí khi webfonts thực bắt đầu có sẵn. Kể từ năm 2016 you just need WOFF. Và WOFF2 nếu bạn muốn tận dụng lợi thế của phiên bản WOFF mới hơn tốt hơn, thì only just trở thành đề xuất w3 (tại thời điểm câu trả lời này).

Để giúp mọi thứ trở nên dễ dàng hơn, as of January 12th 2016, Microsoft ceased support for IE8 and below, với hỗ trợ giới hạn cho IE9: chúng sẽ chỉ hỗ trợ trình duyệt mới nhất có sẵn cho từng hệ điều hành vẫn được hỗ trợ, nghĩa là IE9 không còn được hỗ trợ cho Windows XP nữa. , nhưng vẫn giữ nguyên về mặt kỹ thuật — được hỗ trợ cho đến khi Vista SP2 và Server 2008 R2 kết thúc hỗ trợ mở rộng trong năm 2017 và 2020, tương ứng. Tất nhiên, hỗ trợ webfont của Windows Server 2008 không liên quan và hầu hết các doanh nghiệp vẫn sử dụng phiên bản cũ của Windows đã bỏ qua Vista, hoặc là trên Windows XP (với nguy cơ riêng của họ) hoặc Windows 7 (mà chúng ta có thể mong đợi Windows 10 vào tháng 7 năm 2016, thứ 29 trong số đó là the last date mọi người có thể nâng cấp từ 7/8.1 — nhưng không phải từ 8 đến 10 miễn phí).

(tháng 4 năm 2017 sửa: Windows Vista SP2 đã đi ra ngoài hỗ trợ trong tháng này, và như vậy IE9 hiện nay đã chính thức không còn được hỗ trợ)

Đối với TTF/OTF, bạn không muốn sử dụng các trực tuyến nữa hơn là bạn muốn sử dụng hình ảnh TIFF thay vì JPG hoặc PNG: mặc dù WOFF chỉ là "một" bao bọc mỏng xung quanh dữ liệu TTF/OTF, WOFF/WOFF2 cho phép dữ liệu được nén, trong khi OpenType đơn giản thì không.

Hơn nữa, TTF/OTF là các phông chữ phổ biến không nén (đối với các hệ thống hỗ trợ OpenType), và do đó được xem xét cẩn thận hơn bởi các trình duyệt cho tính chính xác, đặc biệt là bởi các phiên bản của IE. Sử dụng WOFF, mà như một filetype làm cho nó rõ ràng đây là một W eb (O bút) F ont (F ormat), một hình thức ít nghiêm ngặt của giám sát có nghĩa là một số phông chữ đó sẽ thất bại một OpenType hệ thống xác minh vượt qua vẫn có thể hoạt động tốt như webfonts (do thực tế là không phải tất cả dữ liệu OpenType được yêu cầu cho phổ quát là cần thiết để phông chữ hoạt động chỉ trong ngữ cảnh web).

Cuối cùng, bạn có lựa chọn trong định dạng WOFF: định dạng 1, được gọi là WOFF, là định dạng cũ hơn và sử dụng nén dựa trên deflate, tương tự như nén PNG. Định dạng 2, được gọi là WOFF2, là định dạng mới hơn với nén dựa trên thuật toán brotli và cũng cho phép "cắt" phông chữ thành các tệp riêng biệt để phân phối tối ưu khi xử lý phông chữ unicode hỗ trợ nhiều ngôn ngữ: bạn không cần tất cả các tệp cùng một lúc, do đó, chỉ phân phối các tệp đó bao gồm phạm vi unicode cần thiết cho một trang cụ thể và bạn giữ kích thước trang và thời gian tải xuống nhiều hơn một chút.

Trong sự kết hợp: liên tục cho cuộc diễu hành của tiến trình, chỉ cần sử dụng WOFF (hoặc WOFF2).

+1

Giải thích thực sự thú vị. WOFF FTW! – Vucko

+1

Vâng, tôi sẽ đứng thứ hai khái niệm này. Ngoại lệ thực tế duy nhất tôi có thể nghĩ là nếu bạn có một số loại kiosk đóng với các hệ thống/trình duyệt nhúng cũ không hỗ trợ WOFF, không thể nâng cấp và trình bày bằng phông chữ tùy chỉnh là rất quan trọng. Nhưng sau đó bạn đã có hai vấn đề (ít nhất) :-) – djangodude

+0

Câu trả lời tuyệt vời, và thực sự tốt lịch sử tidbits trong đó là tốt, cảm ơn! – paulcpederson

0

Tôi nghĩ rằng việc sử dụng ttf là đủ cho tất cả các trình duyệt và thiết bị hiện đại ... Bản thân tôi đã kiểm tra tức là firefox, chrome, opera, android mobile (kitkat, mashmallow) và iPhone (6 đến 7 Plus). Có vẻ như TTF được hỗ trợ bởi tất cả các thiết bị được đề cập ở trên.

+0

Bạn đã thực sự đọc câu trả lời đã được đưa ra năm ngoái chưa? –

Các vấn đề liên quan