Các font-displayđịnh nghĩa bất động sản như thế nào file font được nạp và hiển thị bởi trình duyệt. Nó được áp dụng cho @font-facequy tắc xác định phông chữ tùy chỉnh trong biểu định kiểu.
@font-face ( font-family: 'MyWebFont'; /* Define the custom font name */ src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); /* Define where the font can be downloaded */ font-display: fallback; /* Define how the browser behaves during download */ )Giá trị
Các font-displaybất động sản chấp nhận năm giá trị:
auto(mặc định): Cho phép trình duyệt sử dụng phương thức mặc định để tải, phương thức này thường tương tự nhất vớiblockgiá trị.block: Hướng dẫn trình duyệt ẩn văn bản trong thời gian ngắn cho đến khi phông chữ được tải xuống đầy đủ. Chính xác hơn, trình duyệt vẽ văn bản bằng một trình giữ chỗ vô hình, sau đó hoán đổi văn bản với mặt phông chữ tùy chỉnh ngay khi tải. Điều này còn được gọi là “một đoạn văn bản vô hình” hoặc FOIT.swap: Hướng dẫn trình duyệt sử dụng phông chữ dự phòng để hiển thị văn bản cho đến khi phông chữ tùy chỉnh được tải xuống hoàn toàn. Đây còn được gọi là “đoạn văn bản chưa được định kiểu” hoặc FOUT.fallback: Hoạt động như một sự thỏa hiệp giữa các giá trịautovàswap. Trình duyệt sẽ ẩn văn bản trong khoảng 100ms và, nếu phông chữ chưa được tải xuống, sẽ sử dụng văn bản dự phòng. Nó sẽ hoán đổi sang phông chữ mới sau khi tải xuống, nhưng chỉ trong một khoảng thời gian hoán đổi ngắn (có thể là 3 giây).optional: Giống nhưfallback, giá trị này yêu cầu trình duyệt ẩn văn bản ban đầu, sau đó chuyển sang phông chữ dự phòng cho đến khi phông chữ tùy chỉnh có sẵn để sử dụng. Tuy nhiên, giá trị này cũng cho phép trình duyệt xác định xem phông chữ tùy chỉnh có được sử dụng hay không, sử dụng tốc độ kết nối của người dùng làm yếu tố quyết định trong đó các kết nối chậm hơn ít có khả năng nhận được phông chữ tùy chỉnh.
Đây là một cách khác để nghĩ về chúng
| Thời gian khối | Thời gian hoán đổi | |
|---|---|---|
| khối | Ngắn | Vô hạn |
| hoán đổi | không ai | Vô hạn |
| dự phòng | Cực kỳ ngắn | Ngắn |
| không bắt buộc | Cực kỳ ngắn | không ai |
Tại sao chúng ta cần font-display
Trước khi chúng tôi nhận được sự hỗ trợ rộng rãi @font-face, kho vũ khí đánh máy của chúng tôi bị giới hạn ở các phông chữ cục bộ, trong đó các phông chữ khả dụng duy nhất là những phông chữ được tải sẵn trên máy tính của người dùng cuối. Chúng tôi gọi những phông chữ này là “web an toàn” vì trình duyệt không cần tải xuống bất cứ thứ gì để chúng được hiển thị.
Sau đó, @font-facequy tắc mang lại cho các nhà thiết kế web và các nhà phát triển front-end những quyền lực mới về kiểu chữ không giống như trước đây. Nó cho phép chúng tôi tải tệp phông chữ lên máy chủ và viết một bộ quy tắc trong bảng định kiểu của chúng tôi đặt tên phông chữ và cho trình duyệt biết nơi tải tệp xuống. Nó cũng làm phát sinh các dịch vụ như Google Fonts, mang các phông chữ tùy chỉnh đến với đại chúng. Cuối cùng, một rào cản lớn ngăn cách thiết kế web với thiết kế in ấn đã bị lật đổ!
Tuy nhiên, các phông chữ tùy chỉnh đã đến (và tiếp tục đến) với một cái giá phải trả. Các tệp phông chữ có thể lớn và thời gian thêm để tải tệp xuống có thể làm chậm hiệu suất của trang web, đặc biệt là đối với các thiết bị có kết nối mạng chậm hơn. Người dùng phải trả thêm phí cho các gói dữ liệu hạn chế cũng trở thành một yếu tố.
Một mối quan tâm đặc biệt khác nảy sinh với các phông chữ tùy chỉnh là thứ được gọi là “một đoạn văn bản không có định dạng” hay viết tắt là FOUT. Các trình duyệt sẽ mặc định hiển thị phông chữ hệ thống trong khi chờ tải xuống phông chữ tùy chỉnh. Điều này cho phép các trang web tải nhanh hơn nhưng làm dấy lên lo ngại giữa các nhà thiết kế web, những người coi điều này là chiếm đoạt trải nghiệm người dùng và trình bày sai thiết kế dự kiến. Các trình duyệt web ngày nay thường ẩn văn bản cho đến khi phông chữ tùy chỉnh được tải xuống, mà bây giờ chúng ta gọi là "một đoạn văn bản ẩn" hoặc FOIT.
Cả FOUT và FOIT đều không tuyệt vời. Chúng tôi có các cách để tối ưu hóa hiệu suất của phông chữ tùy chỉnh để giúp giảm bớt các hiệu ứng. Tuy nhiên, bây giờ chúng ta phải font-displaycho trình duyệt biết liệu chúng ta thích FOUT, FOIT hay thậm chí một cái gì đó ở giữa.
Kiểm tra để được hỗ trợ
Cảnh báo thú vị được Šime Vidas lưu ý:
CSS font-display là bộ
@font-facemô tả chứ không phải thuộc tính, vì vậy không thể kiểm tra hỗ trợ của nó trong trình duyệt bằng các truy vấn tính năng (@supportsquy tắc CSS và API CSS.supports).
Thêm thông tin
- Mô-đun điều khiển kết xuất phông chữ CSS Đặc điểm kỹ thuật cấp 1: Bản thảo của đặc điểm kỹ thuật cho thuộc tính.
font-displaydành cho đại chúng: Jeremy Wagner đã giới thiệu cho chúng tôi về thuộc tính tại đây trên CSS-Tricks.- Sử dụng
@font-face: Giải thích toàn diện về quy tắc và các phương pháp hay nhất về cách sử dụng. - System Font Stack: Một đoạn mã để chuyển hoàn toàn các phông chữ tùy chỉnh và chỉ dựa vào phông chữ hệ thống của người dùng.
- Kiểm soát Hiệu suất Phông chữ với
font-display: Một bài viết hay về chủ đề của Google.
Hỗ trợ trình duyệt
Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một con số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.
Máy tính để bàn
| Trình duyệt Chrome | Firefox | I E | Cạnh | Safari |
|---|---|---|---|---|
| 60 | 58 | Không | 79 | 11.1 |
Di động / Máy tính bảng
| Chrome dành cho Android | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 11,3-11,4 |