Việc sử dụng phông chữ phổ biến trên hầu hết các trang web và thường có lỗi. Nhiều lỗi trong số này tác động tiêu cực đến ngân sách hiệu suất web. Bài viết này nhằm mục đích cung cấp thông tin về cách sử dụng phông chữ web và giúp cải thiện hiệu suất web của bạn.
Như được hiển thị trong hệ thống phân cấp được áp dụng khi hiển thị bất kỳ trang web nào, các thành phần phông chữ có thể trì hoãn việc hiển thị các thành phần khác cho đến khi chúng được tải. Việc quản lý đúng cách độ trễ này rất quan trọng đối với cả Sự thay đổi bố cục tích lũy (CLS) và nhận thức của người dùng.
Sự cố với việc tải phông chữ
Cho đến khi phông chữ của trang được tải, khả năng hiển thị của phông chữ trong quá trình hiển thị HTML và CSS sẽ khác nhau tùy theo trình duyệt. Dưới đây là bản tóm tắt về cách các trình duyệt khác nhau xử lý tình huống này:
| trình duyệt | Hành vi mặc định nếu phông chữ chưa sẵn sàng… |
|---|---|
| Cạnh | Sử dụng phông chữ hệ thống cho đến khi phông chữ sẵn sàng. Hoán đổi phông chữ. |
| cơ rôm | 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ãy sử dụng phông chữ hệ thống cho đến khi phông chữ sẵn sàng. 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ãy sử dụng phông chữ hệ thống cho đến khi phông chữ sẵn sàng. Hoán đổi phông chữ. |
| Safari | Ẩn văn bản cho đến khi phông chữ sẵn sàng. |
Để giải quyết vấn đề này mà không cần dựa vào về hành vi của trình duyệt, tham số hiển thị phông chữ đã được giới thiệu. Hiện tại, 92% trình duyệt hỗ trợ tham số hiển thị phông chữ.
Hiển thị phông chữ làm gì?
Trong quá trình tải trang, hình thức của phông chữ có thể thay đổi cho đến khi chúng được tải đầy đủ, tùy thuộc vào trình duyệt. Ví dụ: một số phiên bản trình duyệt Safari ẩn văn bản cho đến khi phông chữ được tải. Các hiển thị phông chữ: trao đổi Tham số CSS tiêu chuẩn hóa hành vi này bằng cách hiển thị văn bản bằng phông chữ hệ thống cho đến khi tệp phông chữ được tải. Khi phông chữ được tải, phông chữ hệ thống sẽ được hoán đổi thành phông chữ dự định. Đây là một cách sử dụng ví dụ:
@font-face {
font-family: 'Awesome Font';
font-style: normal;
font-weight: 400;
font-display: swap;
}Tải trước phông chữ
sử dụng tải phông chữ trước đường dẫn kết xuất quan trọng có thể ngăn chặn các khoảng trống trong khi phông chữ đang tải.
TIỀN THƯỞNG: Cách tiếp cận ngành đối với việc sử dụng phông chữ
Theo dữ liệu của SameTech, chúng ta hãy cùng điểm qua một xu hướng quan trọng và bức ảnh chụp nhanh về thế giới internet. Biểu đồ đầu tiên bên dưới hiển thị việc sử dụng phông chữ trên 10,000 trang hàng đầu và biểu đồ thứ hai hiển thị mức sử dụng phông chữ trên 100,000 trang web hàng đầu. Trước tiên hãy xem xét các biểu đồ này:
Có sự khác biệt 5% trong việc sử dụng Google Font và Font Awesome giữa 10,000 trang web hàng đầu và 100,000 trang web hàng đầu. Điều này cho chúng ta biết rằng 10,000 trang web hàng đầu đã tối ưu hóa việc sử dụng phông chữ của họ. Chúng tôi khuyên bạn nên xem xét đây là một chủ đề đáng chú ý. Hãy xem xét cách bạn có thể triển khai phông chữ web bằng các giải pháp của riêng mình.
THƯỞNG 2: Thống kê sử dụng Google Font và Font Awesome
Đề cập đến phần thưởng đầu tiên, chúng tôi khuyên bạn nên kiểm tra hai biểu đồ hiển thị phạm vi số lượng của các thư viện phông chữ được sử dụng nhiều nhất. Số lượng tên miền duy nhất ở đây vượt quá hàng triệu, và hàng triệu người này đại diện cho đối thủ cạnh tranh SEO của bạn. Sử dụng những thư viện này tốt hơn và tối ưu hơn những thư viện khác có thể giúp bạn nổi bật.
Bằng cách làm theo các mẹo này và tối ưu hóa việc sử dụng phông chữ, bạn có thể cải thiện đáng kể hiệu suất web và trải nghiệm người dùng của mình.
