Tránh văn bản ẩn trong khi tải phông chữ

Katie Hempenius

Barry Pollard

Tại sao bạn nên quan tâm?

Phông chữ thường là các tệp lớn và mất chút thời gian để tải. Để xử lý vấn đề này, một số trình duyệt ẩn văn bản cho đến khi tải xong phông chữ ("văn bản nhấp nháy của văn bản không hiển thị").

Thời gian hiển thị nội dung lớn nhất (LCP) có thể bị trễ khi chờ văn bản hiển thị. Nếu đang tối ưu hoá hiệu suất, bạn nên tránh hiện tượng "flash văn bản không hiển thị" (FOIT) và hiển thị nội dung cho người dùng ngay lập tức bằng phông chữ hệ thống, điều này tạo ra "văn bản flash không có kiểu" (FOUT).

Chế độ mặc định của trình duyệt để hiển thị phông chữ

Dưới đây là các hành vi tải phông chữ mặc định cho các trình duyệt phổ biến:

Hiển thị văn bản ngay lập tức

Hướng dẫn này trình bày hai cách để hiển thị văn bản càng sớm càng tốt: phương pháp đầu tiên là đơn giản và có hỗ trợ trình duyệt tốt. Cách tiếp cận thứ hai sẽ chuyên sâu, nhưng có thể cung cấp nhiều lựa chọn hơn cho bạn. Lựa chọn tốt nhất cho trang web phụ thuộc vào yêu cầu của bạn.

Lựa chọn 1: Sử dụng font-display

font-display là một API để chỉ định chiến lược hiển thị phông chữ. swap cho trình duyệt biết rằng văn bản sử dụng phông chữ này sẽ được hiển thị ngay lập tức bằng phông chữ hệ thống. Sau khi phông chữ tuỳ chỉnh đã sẵn sàng, phông chữ hệ thống sẽ được hoán đổi.

/* Before */
@font-face {
  font-family: Helvetica;
}

/* After */
@font-face {
  font-family: Helvetica;
  font-display: swap;
}

Nếu một trình duyệt không hỗ trợ font-display (mặc dù tất cả các trình duyệt hiện đại đều hỗ trợ), thì trình duyệt sẽ tiếp tục tuân theo hành vi mặc định để tải phông chữ.

Lựa chọn 2: Chờ để sử dụng phông chữ tuỳ chỉnh cho đến khi chúng được tải

Khi làm nhiều việc hơn một chút, bạn có thể cân nhắc sử dụng một phương pháp tuỳ chỉnh hơn.

Có 3 phần trong phương pháp này:

• Đừng sử dụng phông chữ tuỳ chỉnh khi tải trang ban đầu bằng cách tái cấu trúc CSS để không sử dụng phông chữ tuỳ chỉnh ban đầu. Điều này đảm bảo trình duyệt hiển thị văn bản ngay lập tức bằng phông chữ hệ thống.
• Phát hiện thời điểm phông chữ tùy chỉnh của bạn được tải bằng cách sử dụng API tải phông chữ CSS
• Cập nhật kiểu trang để sử dụng phông chữ tuỳ chỉnh.

// Define a FontFace
const font = new FontFace("myfont", "url(myfont.woff)");

// Add to the document.fonts (FontFaceSet)
document.fonts.add(font);

// Load the font
font.load();

// Wait until the fonts are all loaded
document.fonts.ready.then(() => {
  // Update the CSS to use the fonts
});

Bạn cũng có thể thực hiện việc này với thư viện FontFaceObserver, một số API tìm thấy API dễ sử dụng hơn.

Việc này cho phép bạn xem xét một số điểm khác khi tải phông chữ. Ví dụ: tất cả các phông chữ đều có thể được tải cùng một lúc, tránh nhiều bố cục khi mỗi phông chữ tải. Hoặc các trang web có thể chọn không tải phông chữ cho những người dùng sử dụng kết nối chậm hoặc cho những người dùng tuỳ chọn Lưu dữ liệu.

Xác minh

Chạy Lighthouse để xác minh trang web đang sử dụng font-display: swap để hiển thị văn bản:

1. Nhấn tổ hợp phím Control+Shift+J (hoặc Command+Option+J trên máy Mac) để mở Công cụ cho nhà phát triển.
2. Nhấp vào thẻ Lighthouse.
3. Đảm bảo bạn đã chọn hộp đánh dấu Hiệu suất trong danh sách Danh mục.
4. Nhấp vào nút Tạo báo cáo.

Xác nhận rằng quá trình kiểm tra Đảm bảo văn bản vẫn hiển thị trong quá trình tải phông chữ web đang vượt qua quy trình kiểm tra.