FOUT là gì? So sánh sự khác nhau giữa FOUT, FOIT và Font-Display

Những điểm chính

• Khái niệm: Hiểu FOUT là hiện tượng chữ hiển thị bằng font dự phòng trước khi web font tải xong

• Ưu và nhược điểm: Đánh giá lợi ích về tốc độ hiển thị và hạn chế về trải nghiệm thị giác

• Chiến lược hiển thị font: Nắm vai trò các giá trị của font-display

• Cách giảm thiểu lỗi: Biết cách preload, self-host và tối ưu định dạng font

• So sánh FOUT, FOIT và font-display: Phân biệt cách hiển thị và mục tiêu sử dụng

• Công cụ đo lường: Biết các công cụ kiểm tra hiệu suất tải font

FOUT là gì?

FOUT (Flash of Unstyled Text) là hiện tượng trình duyệt hiển thị văn bản bằng font hệ thống trước, sau đó mới chuyển sang web font khi file font tải xong. Trong thời gian ngắn ban đầu, người dùng sẽ thấy chữ bằng font khác rồi bị thay đổi sang font chính, tạo cảm giác “nháy” nhẹ.

FOUT ,font-display, font

Về bản chất, FOUT xảy ra do trình duyệt ưu tiên hiển thị nội dung sớm: render HTML trước bằng font có sẵn, sau đó thay bằng web font khi tải xong. Nhiều frontend developer chủ động dùng FOUT thông qua font-display: swap để người dùng đọc được nội dung ngay thay vì bị ẩn chữ như FOIT.

Ví dụ: trình duyệt hiển thị Arial trước, sau đó chuyển sang font tùy chỉnh khi tải xong.

Ưu và nhược điểm của FOUT

Ưu điểm

Hiển thị nội dung ngay: Văn bản xuất hiện ngay bằng fallback font

Tránh FOIT: Không bị ẩn chữ trong thời gian chờ font tải

Cải thiện tốc độ cảm nhận: Người dùng đọc được nội dung sớm hơn

Nhược điểm

Thay đổi layout: Khi web font áp dụng có thể làm lệch kích thước chữ

Không đồng nhất giao diện: Dễ thấy sự khác biệt font trong lúc tải

Chiến lược hiển thị font với font-display

Thuộc tính font-display trong @font-face quyết định cách trình duyệt xử lý web font khi tải.

• font-display: auto: Trình duyệt tự chọn, thường giống FOIT trong thời gian ngắn

• font-display: block: Ẩn chữ một thời gian để chờ font tải xong

• font-display: swap: Hiển thị fallback trước → chuyển sang web font (tạo FOUT)

• font-display: fallback: Thời gian chờ ngắn, nếu font chậm thì giữ fallback

• font-display: optional: Ưu tiên hiệu năng, có thể bỏ qua web font nếu tải chậm

Cách giảm thiểu FOUT

Để giảm tác động của FOUT cần tối ưu cả quá trình tải font:

• Preload font quan trọng bằng <link rel="preload" as="font">

• Self-host Google Fonts để giảm DNS và request ngoài

• Chọn fallback font tương đồng với font chính

• Dùng font-display: swap hoặc fallback hợp lý

• Ưu tiên định dạng WOFF2 để giảm dung lượng

• Subset ký tự chỉ giữ các glyph cần dùng

• Cấu hình cache dài hạn khi tự host font

• Dùng system font cho dashboard hoặc app nội bộ

Các kỹ thuật này giúp rút ngắn thời gian dùng fallback và giảm hiện tượng nháy font.

FOUT ,font-display, font

So sánh FOUT, FOIT và font-display

FOUT, FOIT và font-display đều liên quan đến cách trình duyệt tải và hiển thị web font nhưng mục tiêu khác nhau về tốc độ và tính nhất quán.

Tiêu chí	FOIT	FOUT	font-display: swap
Hiển thị ban đầu	Ẩn chữ	Hiển thị fallback	Hiển thị fallback
Mục tiêu	Giữ font đồng nhất	Ưu tiên đọc nhanh	Cân bằng tốc độ & thương hiệu
Trải nghiệm	Vùng chữ trắng	Đọc được ngay	Đọc ngay, áp dụng font sau
Rủi ro	Cảm giác chậm	Nháy font	Nháy nhẹ nếu fallback khác
Cấu hình	`font-display: block`	`font-display: swap`	Thiết lập tường minh
Nên dùng	Site cần đồng nhất tuyệt đối	Blog, landing page	Phần lớn website nội dung