FOUT và FOIT là gì?
Còn gọi: chữ nhấp nháy khi tải web font, fout, foit, fout foit, font display swap
FOUT (flash of unstyled text) là hiện tượng chữ hiện trước bằng font dự phòng rồi đổi sang web font khi tải xong; FOIT (flash of invisible text) là chữ bị ẩn trong lúc chờ web font tải.
Hiểu kỹ hơn
Cả hai xảy ra vì web font là tệp phải tải về. Thuộc tính CSS font-display trong @font-face điều khiển cách xử lý: swap hiện ngay font dự phòng rồi thay (gây FOUT nhưng người dùng đọc được ngay), block ẩn chữ một thời gian ngắn (gây FOIT), optional chỉ dùng web font nếu tải đủ nhanh. Nhiều trang chọn swap để tránh màn hình trống chữ. Nhược điểm là khi đổi font, dòng chữ có thể dài ngắn khác nhau làm bố cục nhảy, ảnh hưởng chỉ số CLS. Cách giảm: chọn font dự phòng có độ rộng gần giống, dùng các thuộc tính điều chỉnh như size-adjust, tải trước (preload) font quan trọng, và giới hạn số kiểu chữ. Với tiếng Việt, đảm bảo bộ ký tự tải về có đủ dấu.
