Icon Fonts 101

Icon fonts là các kiểu chữ trong đó các glyph — thường là chữ cái và số — được thay thế bằng các ký hiệu hình ảnh. Thay vì hiển thị chữ "A", một icon font hiển thị biểu tượng ngôi nhà, kính lúp tìm kiếm, hoặc giỏ hàng.

Vì các biểu tượng nằm trong tệp font, chúng hoạt động giống hệt văn bản. Bạn có thể thay đổi kích thước bằng font-size, thay đổi màu bằng color, thêm text shadows, áp dụng CSS transitions, và thậm chí tạo hoạt ảnh — tất cả mà không cần chạm vào bất kỳ tệp hình ảnh nào.

Phương pháp này mang lại nhiều lợi ích thực tế:

• Độc lập với độ phân giải — các đường vector hiển thị sắc nét trên mọi mật độ màn hình
• Dung lượng nhỏ — một tệp font nén thay thế hàng chục tệp hình ảnh riêng lẻ
• Kiểm soát bằng CSS — màu sắc, kích thước, bóng, độ mờ và trạng thái hover có sẵn miễn phí với định dạng văn bản
• Một yêu cầu HTTP duy nhất — toàn bộ bộ biểu tượng tải trong một lần truyền mạng

Ở thời kỳ đầu của web, các nhà phát triển dựa vào hình ảnh riêng lẻ hoặc CSS image sprites — hình ảnh tổng hợp lớn, trong đó mỗi biểu tượng chiếm một vùng hình chữ nhật cố định. Sprites giảm yêu cầu HTTP nhưng dễ vỡ: thêm hoặc thay đổi kích thước một biểu tượng đồng nghĩa với việc phải tạo lại toàn bộ sprite sheet và cập nhật pixel offset bằng tay.

Khoảng năm 2012, các dự án như Font Awesome và IcoMoon đã phổ biến một phương án thay thế gọn gàng hơn: đóng gói các biểu tượng như các font glyph được ánh xạ vào Vùng Sử Dụng Riêng Tư của Unicode. Các nhà thiết kế có thể hoán đổi toàn bộ bộ biểu tượng bằng cách thay đổi một khai báo @font-face, và các nhà phát triển có thể tạo kiểu cho các biểu tượng bằng CSS họ đã sử dụng cho văn bản. Kỹ thuật này lan rộng nhanh chóng và vẫn là lựa chọn đáng tin cậy, ít tốn kém cho các hệ thống thiết kế sử dụng biểu tượng màu đơn.

Cuộc tranh luận "icon fonts vs inline SVG" đã là chủ đề thường xuyên trong các cuộc thảo luận front-end hơn một thập kỷ. Cả hai phương pháp đều hợp lệ — lựa chọn đúng đắn phụ thuộc vào yêu cầu của dự án.

Icon Fonts

• Một yêu cầu HTTP duy nhất — một tệp font cung cấp mọi biểu tượng
• Tạo kiểu CSS cực đơn giản — thay đổi color, font-size và text-shadow như văn bản thông thường
• Chỉ một màu — mỗi glyph chỉ hỗ trợ một màu tô duy nhất
• Tích hợp dễ dàng — thêm liên kết stylesheet, sử dụng CSS class, hoàn tất

Inline SVG

• Đa màu — mỗi đường có thể có màu tô, stroke hoặc gradient riêng
• Có thể truy cập theo mặc định — <title> và aria-label cung cấp ngữ nghĩa thực sự cho trình đọc màn hình
• Có thể cache từng cái — các biểu tượng không sử dụng sẽ không bao giờ được tải xuống
• Kiểm soát chi tiết — tạo hoạt ảnh từng đường riêng lẻ, áp dụng bộ lọc cho từng phần tử

SVG Sprites

• Kết hợp nhiều SVG thành một <symbol> sprite sheet duy nhất
• Tham chiếu biểu tượng bằng <use href="#icon-name">
• Mang lại lợi ích của cả hai — một yêu cầu, đa màu, có thể truy cập — nhưng yêu cầu build pipeline phức tạp hơn

Icon fonts có thể được đóng gói trong năm định dạng tệp, mỗi định dạng có tính năng nén, hỗ trợ trình duyệt và trường hợp sử dụng khác nhau. Đây là cách so sánh tổng quan:

Không chắc nên bao gồm định dạng nào? Sử dụng hướng dẫn quyết định thực tế này:

• Nếu chỉ chọn một — dùng WOFF2. Nó mang lại tính năng nén tốt nhất (Brotli) và bao phủ 97%+ trình duyệt.
• Nếu cần hỗ trợ IE 11 — dùng WOFF2 + WOFF. WOFF xử lý các trình duyệt còn lại thiếu khả năng giải mã Brotli.
• Nếu cần hỗ trợ IE 8 — dùng WOFF2 + WOFF + EOT. EOT là định dạng duy nhất mà Internet Explorer 6-8 hiểu.
• Cho ứng dụng máy tính — dùng TTF. Đây là định dạng gốc để hiển thị font ở cấp độ OS trên Windows, macOS và Linux.
• Để gỡ lỗi vấn đề font — kiểm tra SVG Font. Cấu trúc XML của nó có thể đọc được bằng con người, giúp dễ dàng xác minh glyph paths và metadata.

Tìm hiểu sâu hơn về từng định dạng để hiểu cơ chế nội bộ, tính tương thích trình duyệt và các thực hành tốt nhất:

Tìm hiểu cách sử dụng các định dạng này trong dự án của bạn: