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 một chút thời gian để tải. Để giải quyết vấn đề này, một số trình duyệt sẽ ẩn văn bản cho đến khi tải phông chữ ("nhấp nháy văn bản không hiển thị").
Nội dung lớn nhất hiển thị (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 sẽ cầ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 sẽ tạo ra "nhấp nháy văn bản không định kiểu" (FOUT).
Các 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:
| Trình duyệt | Chế độ mặc định nếu phông chữ chưa sẵn sàng... |
|---|---|
| Chrome và Edge | Sẽ ẩn văn bản trong tối đa 3 giây. Nếu văn bản vẫn chưa sẵn sàng, hệ thống sẽ sử dụng phông chữ của hệ thống cho đến khi phông chữ đã sẵn sàng, sau đó hoán đổi phông chữ. |
| Firefox | Sẽ ẩn văn bản trong tối đa 3 giây. Nếu văn bản vẫn chưa sẵn sàng, hệ thống sẽ sử dụng phông chữ của hệ thống cho đến khi phông chữ đã sẵn sàng, sau đó hoán đổi phông chữ. |
| Safari | Ẩn văn bản cho đến khi phông chữ sẵn sàng. |
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 sớm nhất có thể: cách tiếp cận đầ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 là chuyên sâu, nhưng có thể cung cấp nhiều tuỳ chọn hơn cho bạn. Lựa chọn tốt nhất cho trang web phụ thuộc vào các 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 dùng phông chữ này phải 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ù mọi 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 của mình để tải phông chữ.
Lựa chọn 2: Chờ sử dụng phông chữ tuỳ chỉnh cho đến khi các phông chữ đó được tải
Bạn xử lý nhiều hơn một chút, có thể cân nhắc áp dụng phương pháp tuỳ chỉnh hơn.
Có ba phần của phương pháp này:
- Không sử dụng phông chữ tuỳ chỉnh trong lượt 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 rằng 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ữ tuỳ chỉnh của bạn được tải bằ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 bằng thư viện FontFaceObserver. Thư viện này có thể tìm thấy một API dễ dùng hơn.
Điều này cho phép bạn cân nhắc thêm một số điểm khi tải phông chữ. Ví dụ: bạn có thể tải tất cả phông chữ cùng một lúc, tránh tải 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 người dùng trên kết nối chậm hơn hoặc cho những người sử dụng tuỳ chọn Lưu dữ liệu.
Xác minh
Chạy Lighthouse để xác minh rằng trang web đang sử dụng font-display: swap để hiển thị văn bản:
- 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.
- Nhấp vào thẻ Lighthouse.
- Đảm bảo bạn đã chọn hộp đánh dấu Hiệu suất trong danh sách Danh mục.
- Nhấp vào nút Tạo báo cáo.
Xác nhận rằng bạn đã vượt qua quy 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.