Bạn đang tải phông chữ sai cách (và điều đó đang làm giảm hiệu năng)

 (jonoalderson.com)
30 điểm bởi GN⁺ 2025-08-30 | 1 bình luận | Chia sẻ qua WhatsApp
  • Web font là một yếu tố thị giác của website, định hình thương hiệu và trải nghiệm người dùng, đồng thời ảnh hưởng trực tiếp đến hiệu năng và khả năng truy cập
  • Cách tải phông chữ sai có thể gây ra vấn đề FOUT (nhấp nháy văn bản không có kiểu) hoặc FOIT (nhấp nháy văn bản vô hình), từ đó tác động tiêu cực đến Core Web Vitals
  • Định dạng WOFF2 là một format phông chữ hiện đại và hiệu quả, được hỗ trợ bởi hầu hết các trình duyệt mới, và việc loại bỏ các format legacy không cần thiết sẽ cải thiện hiệu năng
  • Subset phông chữ và chiến lược preload là thiết yếu để giảm truyền dữ liệu không cần thiết và tăng tốc độ tải trang
  • Tận dụng system font stack và CSS descriptor để giảm thiểu dịch chuyển bố cục (CLS) khi tải phông chữ và mang lại trải nghiệm người dùng ổn định

Lược sử ngắn gọn của web font

Web font là một yếu tố cốt lõi của thiết kế web và trải nghiệm người dùng, nhưng dù quan trọng như vậy, nhiều người vẫn đang dùng sai cách. Dưới đây là tóm tắt quá trình phát triển của web font.

  • Thời kỳ "web safe"

    • Ở giai đoạn đầu của web, chỉ có thể dùng web safe font như Arial, Times New Roman, còn phông chữ tùy chỉnh thì bị thay thế bằng hình ảnh
    • Mỗi trình duyệt render phông chữ khác nhau nên rất khó duy trì thiết kế nhất quán

  • Các mẹo hack trước @font-face: sIFR và Cufón

    • sIFR: dùng Flash để render văn bản động nhưng nặng và kém khả năng truy cập
    • Cufón: dùng JavaScript để chuyển phông chữ thành đồ họa vector rồi nhúng vào, nhưng chậm và vẫn giữ nguyên vấn đề về khả năng truy cập

  • Sự xuất hiện của @font-face

    • @font-face cho phép nhúng phông chữ tùy chỉnh bằng CSS, nhưng vì mỗi trình duyệt yêu cầu format khác nhau (EOT, SVG font, TTF/OTF) nên khá phức tạp
    • Các vấn đề về giấy phép phông chữ và sao chép trái phép cũng diễn ra tràn lan

  • Dịch vụ thương mại: Typekit và các bên cùng thời

    • Typekit (nay là Adobe Fonts) là dịch vụ thuê bao giải quyết vấn đề giấy phép và tương thích, cung cấp phông chữ thông qua đoạn mã JavaScript
    • Mô hình phụ thuộc vào script bên thứ ba đó vẫn còn kéo dài đến ngày nay

  • Các mẹo tương thích và cách lách

    • Cần host nhiều format hoặc dùng các bản vá JavaScript để xử lý FOUT và FOIT
    • Cũng từng có những nỗ lực dùng icon font để giải quyết tình trạng thiếu glyph

  • Google Fonts và làn sóng "phông chữ miễn phí"

    • Google Fonts mang lại sự tiện lợi trong việc tải phông chữ thông qua các phông mã nguồn mở miễn phí, nhưng cũng tạo ra vấn đề mới như vi phạm GDPR và tốc độ tải chậm
    • Khác với các phông thương mại khó tối ưu do giới hạn giấy phép, Google Fonts cho phép sử dụng tự do

Phông chữ hoạt động như thế nào (cơ bản)

Phông chữ không chỉ là một thiết lập CSS đơn giản mà là một thành phần phức tạp can dự sâu vào rendering pipeline của trình duyệt.

  • Format: từ TTF đến WOFF2

    • TTF/OTF: format nặng, thiên về desktop
    • WOFF2: format web font hiện đại và hiệu quả dùng nén Brotli, phù hợp với hầu hết dự án

  • Rendering pipeline

    • Việc tải phông chữ đi qua các bước đăng ký, giải quyết style, khớp phông chữ, bao phủ glyph, request, giai đoạn hiển thị, giải mã và shaping
    • Thiết lập font-display (swap, block, fallback, optional) quyết định cách hiển thị văn bản

  • Metrics

    • Các metric như Ascent, descent, line gap xác định chiều cao và khoảng cách của phông chữ
    • Khi thay phông chữ, sự không khớp metric có thể gây dịch chuyển bố cục (CLS)

  • Style tổng hợp

    • Nếu trình duyệt không tìm thấy font weight hoặc style được yêu cầu, nó sẽ tạo độ đậm hoặc italic giả, làm giảm chất lượng
    • Có thể ngăn tạo style giả bằng font-synthesis: none;

  • Bao phủ glyph

    • Phông chữ không chứa mọi ký tự, và các glyph bị thiếu sẽ được render bằng phông thay thế, gây ra vấn đề về tính nhất quán
    • Dùng unicode-range để chỉ tải các glyph cần thiết

Cơ bản về hiệu năng và chiến lược

Phông chữ ảnh hưởng đến critical rendering path, và nếu quản lý sai thì hiệu năng có thể suy giảm.

  • Kích thước tệp

    • Một font family đơn lẻ có thể lên tới 800KB, gây lãng phí dữ liệu do chứa các glyph không cần thiết
    • Tối ưu kích thước bằng subset phông chữ để chỉ gửi các glyph cần dùng

  • Dịch chuyển bố cục

    • Chênh lệch metric giữa phông thay thế và phông tùy chỉnh gây ra CLS
    • Có thể ổn định bố cục bằng các CSS descriptor như size-adjust, ascent-override

  • CSS descriptor hiện đại

    • font-display: swap; hiển thị ngay phông thay thế để mang lại quá trình render ổn định
    • Dùng unicode-range để chỉ tải các glyph cần cho từng script cụ thể

Variable font: lời hứa và thực tế

Variable font có thể tăng hiệu quả bằng cách hỗ trợ nhiều style và weight trong một tệp duy nhất.

  • Lời hứa

    • Gộp nhiều tệp tĩnh vào một tệp duy nhất
    • Typography đáp ứng có thể điều chỉnh động theo kích thước viewport

  • Thực tế

    • Nếu chỉ cần ít weight, variable font có thể còn nặng hơn
    • Hỗ trợ trình duyệt còn bị giới hạn ở một số trục, và có thể phát sinh vấn đề giấy phép

  • Chiến lược hiệu năng

    • Chỉ chọn các trục cần thiết và tối ưu kích thước tệp bằng subset theo từng script
    • Cần kiểm tra xem nó có thực sự mang lại lợi ích so với font tĩnh hay không

  • Ví dụ dùng trục variable font trong CSS

    @font-face {  
  font-family: "Acme Variable";  
  src: url("/fonts/acme-variable.woff2") format("woff2-variations");  
  font-weight: 100 900;  
  font-display: swap;  
}  
h1 {  
  font-family: "Acme Variable", system-ui, sans-serif;  
  font-weight: 700;  
}

System stack và CDN

Nếu dùng system font stack mà không cần phông chữ tùy chỉnh, bạn sẽ có tốc độ tải tức thì và trải nghiệm quen thuộc.

  • System font stack

    • Stack gồm các phông như -apple-system, Segoe UI giúp duy trì tính nhất quán trên mọi nền tảng
    • Với render emoji, phông hệ thống thường cho hiệu năng tốt hơn

  • CDN và host bên thứ ba

    • Google Fonts có thể vi phạm GDPR do rò rỉ dữ liệu
    • Tự host giúp giảm độ trễ tra cứu DNS và cho phép kiểm soát cache

Phông thay thế và khớp nối

Phông thay thế quyết định trải nghiệm người dùng trước khi phông tùy chỉnh được tải xong, nên cần thiết kế ổn định.

  • Thiết kế phông thay thế

    • Thiết lập x-height và độ rộng ký tự gần giống phông tùy chỉnh để giảm CLS
    • Dùng font-size-adjust để điều chỉnh kích thước phông thay thế

  • Khớp giữa phông tùy chỉnh và phông thay thế

    • Chọn các phông có tỷ lệ tương tự và dùng điều chỉnh metric để bảo đảm tính ổn định của bố cục
    • Ưu tiên độ ổn định và khả năng đọc, đồng thời cân nhắc khác biệt render theo từng nền tảng

Preload và chiến lược tải

Chiến lược phân phối phông chữ ảnh hưởng rất lớn đến trải nghiệm người dùng.

  • Kết quả tải

    • FOIT gây ra vấn đề văn bản không hiển thị trên mạng chậm
    • font-display: swap; là mặc định an toàn, hiển thị ngay phông thay thế

  • Preload

    • Dùng <link rel="preload" as="font"> để bắt đầu tải phông chữ ngay lập tức
    • Cần có CORS header và URL khớp chính xác

  • Early Hints (HTTP 103)

    • Server có thể chỉ thị tải trước phông chữ trước khi phản hồi HTML, giúp rút ngắn thời gian tải
    • Chỉ nên gợi ý critical font để tránh lãng phí băng thông

  • Font Loading API

    • Font Loading API cho phép kiểm soát chi tiết việc tải phông chữ trên các site động

Định dạng tệp: WOFF2, WOFF, TTF và gánh nặng legacy

WOFF2 là format hiệu quả nhất cho web hiện đại, và trong đa số trường hợp chỉ một format là đủ.

  • Chỉ dùng WOFF2 để loại bỏ các format không cần thiết
  • Nên tránh nhúng base64 vì nó cản trở cache

Icon font: Font Awesome và một sai lầm lớn

Icon font không còn phù hợp với web hiện đại do các vấn đề về khả năng truy cập và hiệu năng.

  • SVG icon có ngữ nghĩa tốt hơn, linh hoạt hơn và có thể style bằng CSS
  • Nếu đang dùng icon font cũ, cần subset lại và lập kế hoạch chuyển sang SVG

Vượt ra ngoài Latin: script phi Latin, ngôn ngữ RTL và emoji

Các script phi Latin và ngôn ngữ RTL đòi hỏi shaping và metric phức tạp hơn.

  • Khi subset, cần cân nhắc đặc tính của từng script để tránh lỗi render
  • Với emoji, nên dùng phông hệ thống để cải thiện tính nhất quán và hiệu năng

Tương lai của web font: tiêu chuẩn đang tiến hóa và rủi ro hiện đại

Các thuộc tính CSS mới cùng với variable font và color font đang thúc đẩy sự phát triển của typography trên web.

  • Font Loading API và Early Hints giúp giải quyết độ trễ trên SPA
  • Cần coi phông chữ như một phần của hạ tầng và ưu tiên hiệu năng lẫn khả năng truy cập

Công cụ và kiểm tra

Hiệu năng phông chữ có thể được đo bằng các công cụ như DevTools, Lighthouse, Glyphhanger.

  • Dùng công cụ subset phông chữ để loại bỏ glyph không cần thiết
  • Dùng Font Style Matcher để điều chỉnh metric của phông thay thế

Tuyên ngôn để xử lý phông chữ đúng cách

Phông chữ không chỉ là trang trí mà là yếu tố cốt lõi của trải nghiệm người dùng và hiệu năng.

  • Ưu tiên hệ thống: bắt đầu với một system font stack vững chắc
  • Subset thông minh: chỉ gửi các glyph cần thiết
  • Chỉ WOFF2: loại bỏ format legacy
  • Tôn trọng script toàn cầu: hỗ trợ nhiều ngôn ngữ và emoji
  • Kiểm thử là quan trọng: thử nghiệm trên nhiều mạng và thiết bị khác nhau

Hãy coi phông chữ vừa là nội dung vừa là thương hiệu, và áp dụng việc quản lý nghiêm ngặt về hiệu năng cũng như khả năng truy cập.

Bài viết liên quan

1 bình luận

 
nemorize 2025-08-30

Cufón đúng là cái tên lâu lắm rồi mới lại nghe thấy nhỉ ha ha