SVG Font

Định dạng font vector gốc — XML có thể đọc bằng con người ánh xạ SVG paths tới font glyphs.

.svg Định dạng SVG Font
LoạiVector dựa trên XML
NénKhông có (văn bản thuần túy)
Kích thước tệpLớn nhất trong tất cả định dạng
Hỗ trợChỉ Safari (đã bị bỏ ở nơi khác)
Phù hợp nhất choGỡ lỗi, định dạng nguồn
BobcornNguồn của pipeline

SVG Font Là Gì?

SVG fonts được định nghĩa như một phần của đặc tả SVG 1.1, được W3C xuất bản. Khác với các định dạng font nhị phân truyền thống, SVG fonts nhúng các đường viền glyph dưới dạng dữ liệu SVG path bên trong phần tử <font>. Mỗi glyph được biểu diễn bởi phần tử <glyph> có thuộc tính d chứa vector path mô tả hình dạng.

Về bản chất, SVG fonts là các bản vẽ SVG được đóng gói thành font. Cú pháp path bạn dùng để vẽ hình trong tệp SVG được tái sử dụng để định nghĩa các hình chữ cái và icon outlines. Điều này làm cho chúng có thể kiểm tra một cách độc đáo — bạn có thể mở SVG font trong bất kỳ trình soạn thảo văn bản nào và đọc hình học thực tế của mọi glyph.

Cách Hoạt Động

Một tệp SVG font bọc các glyph paths trong cấu trúc XML tiêu chuẩn. Đây là ví dụ đơn giản:

Cấu trúc SVG Font 
<font id="MyIcons">
  <font-face font-family="MyIcons" units-per-em="1024"/>
  <glyph glyph-name="home" unicode="&#xE001;"
         d="M512 0L0 448h128v576h256V640h256v384h256V448h128z"/>
  <glyph glyph-name="search" unicode="&#xE002;"
         d="M..."/>
</font>

Phần tử <font-face> khai báo tên font family và hệ tọa độ (units-per-em). Mỗi <glyph> ánh xạ một Unicode code point tới một vector path. Thuộc tính d sử dụng cú pháp path hoàn toàn giống với phần tử <path> của SVG thông thường.

Đây là định dạng trung gian trong pipeline của Bobcorn. Các icon SVG riêng lẻ trước tiên được tổng hợp vào cấu trúc SVG font này, sau đó được chuyển đổi thành các định dạng nhị phân: SVG Font → TTF → WOFF / WOFF2 / EOT.

Ưu và Nhược điểm

    Ưu điểm
  • Có thể đọc bằng con người — mở trong bất kỳ trình soạn thảo văn bản nào
  • Dễ gỡ lỗi glyph paths và metadata
  • Hoàn toàn dựa trên vector, khả năng mở rộng vô hạn
  • Không cần biên dịch để xem nguồn
    Nhược điểm
  • Kích thước tệp lớn nhất trong tất cả định dạng font
  • Đã bị bỏ trong Chrome, Firefox và Edge
  • Không có bất kỳ tính năng nén nào
  • Không hỗ trợ hinting
  • Chất lượng hiển thị kém trên Windows

Hỗ Trợ Trình Duyệt

Hỗ trợ SVG font đã bị xóa khỏi hầu hết các trình duyệt chính. Chrome đã bỏ hỗ trợ SVG font từ phiên bản 38 (năm 2014). Firefox chưa bao giờ triển khai nó. Edge (dựa trên Chromium) cũng không hỗ trợ. Trình duyệt duy nhất còn lại là Safari và iOS Safari, vẫn hiển thị SVG fonts.

Về mục đích sử dụng web thực tế, SVG font về cơ bản là định dạng cũ. Bạn không bao giờ nên dựa vào nó như định dạng phân phối cho người dùng cuối. Hãy sử dụng WOFF2 thay thế.

Khi Nào Sử Dụng SVG Font

  • Gỡ lỗi vấn đề tạo font — vì nó là XML thuần túy, bạn có thể đọc trực tiếp dữ liệu path và so sánh với các icon SVG gốc để chẩn đoán vấn đề.
  • Làm định dạng nguồn trong build pipelines — nhiều công cụ tạo font (bao gồm Bobcorn) sử dụng SVG font làm biểu diễn trung gian trước khi chuyển đổi sang định dạng nhị phân.
  • Hỗ trợ iOS cũ < 5 — cực kỳ hiếm ngày nay, nhưng các thiết bị iOS cũ hơn không hỗ trợ WOFF chỉ có thể sử dụng SVG fonts cho web fonts.
Bobcorn
Trong Bobcorn, SVG font là bước đầu tiên của pipeline tạo. Các icon SVG của bạn được tổng hợp thành SVG font, sau đó được chuyển đổi thành TTF, và từ TTF sang WOFF, WOFF2, và EOT. Bạn có thể xuất tệp SVG font để gỡ lỗi — đặc biệt hữu ích khi glyph trông sai và bạn cần kiểm tra dữ liệu path thô.