Trong thiết kế trang web hiện đại, phông chữ đóng vai trò quan trọng trong việc tạo ra cái nhìn và cảm giác riêng biệt cho mỗi trang web. Tuy nhiên, việc tải phông chữ có thể gây ra các vấn đề như chậm tải trang hoặc hiển thị không đồng nhất. Vì vậy, font-display đã được giới thiệu trong CSS như một công cụ mạnh mẽ để quản lý hiển thị phông chữ hiệu quả hơn.
font-display là gì?
Đây là một thuộc tính của CSS được sử dụng trong việc khai báo phông chữ, nó kiểm soát cách các phông chữ web được tải và hiển thị bởi trình duyệt. Thuộc tính này giúp cải thiện trải nghiệm người dùng bằng cách định rõ cách thức hiển thị phông chữ trong các giai đoạn khác nhau của quá trình tải.
Các giá trị của font-display
Thuộc tính này có năm giá trị chính:
- auto: Được xem như là giá trị mặc định. Trình duyệt sẽ tự động quyết định chiến lược tốt nhất để hiển thị phông chữ.
- block: Khi sử dụng giá trị này, trình duyệt sẽ ẩn văn bản khoảng 3 giây (tùy thuộc vào trình duyệt) và sau đó hiển thị văn bản với phông chữ dự phòng nếu phông chữ web chưa được tải.
- swap: Giá trị này sẽ hiển thị văn bản ngay lập tức với phông chữ dự phòng và thay thế bằng phông chữ web khi nó đã sẵn sàng.
- fallback: Trình duyệt sẽ sử dụng chiến lược giống
blocknhưng với thời gian ẩn văn bản ngắn hơn, khoảng 100ms. - optional: Tương tự như
fallback, nhưng nếu mạng chậm hoặc tài nguyên phông chữ quá lớn, trình duyệt có thể bỏ qua phông chữ web hoàn toàn.
Cách sử dụng font-display trong CSS
Bạn có thể áp dụng font-display khi sử dụng các phông chữ từ thư viện như Google Fonts hoặc khi khai báo phông chữ tự lưu trữ. Dưới đây là ví dụ sử dụng nó với Google Fonts:
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
Khi khai báo phông chữ trong CSS, bạn có thể áp dụng font-display như sau:
@font-face {
font-family: 'CustomFont';
src: url('customfont.woff2') format('woff2');
font-display: swap;
}
body {
font-family: 'CustomFont', sans-serif;
}
Lợi ích của việc sử dụng font-display
- Cải thiện trải nghiệm người dùng: Giúp giảm thiểu các hiện tượng như “Flash of Unstyled Text” (FOUT) hoặc “Flash of Invisible Text” (FOIT).
- Tối ưu hóa hiệu suất tải trang: Giảm thời gian chờ đợi của người dùng, đặc biệt quan trọng đối với những trang web có lượng người truy cập bằng mạng di động cao.
- Kiểm soát tốt hơn việc hiển thị phông chữ: Giúp các nhà phát triển web có thêm tùy chọn trong việc quản lý hiển thị và tối ưu hóa hiệu suất của trang web.
Kết luận
Việc sử dụng thuộc tính này không chỉ giúp cải thiện hiệu suất tải trang, mà còn nâng cao trải nghiệm người dùng thông qua việc kiểm soát tốt hơn quá trình tải phông chữ. Khi bạn thiết kế và phát triển trang web, hãy cân nhắc sử dụng font-display để đảm bảo rằng văn bản trên trang của bạn luôn được hiển thị mượt mà và nhất quán.
Comments