Kể từ Chrome 83, bạn có thể kết hợp link rel="preload" và font-display: optional để loại bỏ hoàn toàn hiện tượng giật bố cục
Bằng cách tối ưu hoá chu kỳ kết xuất, Chrome 83 loại bỏ việc thay đổi bố cục khi tải trước phông chữ không bắt buộc.
Việc kết hợp <link rel="preload"> với font-display: optional là cách hiệu quả nhất để đảm bảo không có hiện tượng giật bố cục khi kết xuất phông chữ tuỳ chỉnh.
Khả năng tương thích với trình duyệt
Hãy xem dữ liệu của MDN để biết thông tin hỗ trợ mới nhất trên nhiều trình duyệt:
Kết xuất phông chữ
Việc thay đổi bố cục hoặc bố cục lại xảy ra khi một tài nguyên trên trang web thay đổi một cách linh động, dẫn đến việc "thay đổi" nội dung. Việc tìm nạp và hiển thị phông chữ web có thể trực tiếp gây ra sự thay đổi bố cục theo một trong hai cách sau:
- Phông chữ dự phòng được hoán đổi với phông chữ mới ("nhấp nháy văn bản không có kiểu")
- Văn bản "vô hình" sẽ hiển thị cho đến khi phông chữ mới được kết xuất vào trang ("nhấp nháy văn bản vô hình")
Thuộc tính font-display của CSS cung cấp một cách để sửa đổi hành vi kết xuất phông chữ tuỳ chỉnh thông qua một loạt các giá trị được hỗ trợ khác nhau (auto, block, swap, fallback và optional). Việc chọn giá trị nào để sử dụng phụ thuộc vào hành vi ưu tiên cho phông chữ được tải không đồng bộ. Tuy nhiên, cho đến nay, mọi giá trị được hỗ trợ này đều có thể kích hoạt việc bố cục lại theo một trong hai cách nêu trên!
Phông chữ không bắt buộc
Thuộc tính font-display sử dụng tiến trình gồm 3 giai đoạn để xử lý các phông chữ cần tải xuống trước khi có thể hiển thị:
- Chặn: Hiển thị văn bản "vô hình", nhưng chuyển sang phông chữ web ngay khi tải xong.
- Hoán đổi: Kết xuất văn bản bằng phông chữ hệ thống dự phòng, nhưng chuyển sang phông chữ web ngay khi tải xong.
- Không đạt: Hiển thị văn bản bằng phông chữ hệ thống dự phòng.
Trước đây, các phông chữ được chỉ định bằng font-display: optional có khoảng thời gian chặn là 100 mili giây và không có khoảng thời gian hoán đổi. Điều này có nghĩa là văn bản "vô hình" sẽ hiển thị rất ngắn trước khi chuyển sang phông chữ dự phòng. Nếu phông chữ không được tải xuống trong vòng 100 mili giây, thì phông chữ dự phòng sẽ được sử dụng và không có hoạt động hoán đổi nào xảy ra.
font-display: optional trước đây trong Chrome khi phông chữ được tải xuống sau khoảng thời gian chặn 100 mili giâyTuy nhiên, trong trường hợp phông chữ được tải xuống trước khi khoảng thời gian chặn 100 mili giây kết thúc, phông chữ tuỳ chỉnh sẽ được kết xuất và sử dụng trên trang.
font-display: optional trước đây trong Chrome khi phông chữ được tải xuống trước khoảng thời gian chặn 100 mili giâyChrome kết xuất lại trang hai lần trong cả hai trường hợp, bất kể có sử dụng phông chữ dự phòng hay không hoặc phông chữ tuỳ chỉnh có tải xong kịp thời hay không. Điều này khiến văn bản ẩn nhấp nháy nhẹ và trong trường hợp phông chữ mới được kết xuất, bố cục bị giật sẽ di chuyển một số nội dung của trang. Điều này xảy ra ngay cả khi phông chữ được lưu trữ trong bộ nhớ đệm ổ đĩa của trình duyệt và có thể tải tốt trước khi khoảng thời gian chặn hoàn tất.
Các biện pháp tối ưu hoá đã ra mắt trong Chrome 83 để xoá hoàn toàn chu kỳ kết xuất đầu tiên cho phông chữ không bắt buộc được tải trước bằng <link rel="preload'>.
Thay vào đó, quá trình kết xuất sẽ bị chặn cho đến khi phông chữ tuỳ chỉnh tải xong hoặc một khoảng thời gian nhất định đã trôi qua. Thời gian chờ này hiện được đặt ở mức 100 mili giây, nhưng có thể thay đổi trong tương lai gần để tối ưu hoá hiệu suất.
font-display: optional mới trong Chrome khi phông chữ được tải trước và phông chữ được tải xuống sau khoảng thời gian chặn 100 mili giây (không có văn bản ẩn xuất hiện)
font-display: optional mới trong Chrome khi phông chữ được tải trước và phông chữ được tải xuống trước khoảng thời gian chặn 100 mili giây (không có văn bản ẩn xuất hiện)Việc tải trước phông chữ không bắt buộc trong Chrome sẽ loại bỏ khả năng bố cục bị giật và văn bản không được định kiểu sẽ nhấp nháy. Điều này phù hợp với hành vi bắt buộc như đã chỉ định trong Mô-đun phông chữ CSS cấp độ 4, trong đó phông chữ không bắt buộc không bao giờ được gây ra việc bố cục lại và các tác nhân người dùng có thể trì hoãn việc kết xuất trong một khoảng thời gian thích hợp.
Mặc dù không cần tải trước phông chữ không bắt buộc, nhưng việc này sẽ cải thiện đáng kể khả năng phông chữ tải trước chu kỳ kết xuất đầu tiên, đặc biệt là nếu phông chữ chưa được lưu trữ trong bộ nhớ đệm của trình duyệt.
Kết luận
Nhóm Chrome rất muốn biết trải nghiệm của bạn khi tải trước phông chữ không bắt buộc bằng các tính năng tối ưu hoá mới này! Gửi vấn đề nếu bạn gặp phải bất kỳ vấn đề nào hoặc muốn gửi đề xuất về tính năng.