Việc quyết định hành vi cho một phông chữ trên web khi phông chữ đang tải có thể là một kỹ thuật điều chỉnh hiệu suất quan trọng. Chỉ số mô tả hiển thị phông chữ mới cho @font-face cho phép nhà phát triển quyết định cách phông chữ trên web của họ sẽ hiển thị (hoặc dự phòng), tuỳ thuộc vào thời gian tải.
Điểm khác biệt trong chế độ hiển thị phông chữ hôm nay
Phông chữ trên web cho phép nhà phát triển kết hợp kiểu chữ phong phú vào dự án của mình với một ưu điểm là nếu người dùng chưa có kiểu chữ, trình duyệt phải dành thời gian tải kiểu chữ đó xuống. Vì mạng có thể không ổn định, nên thời gian tải xuống này có khả năng ảnh hưởng tiêu cực đến trải nghiệm của người dùng. Xét cho cùng, không ai sẽ quan tâm đến việc văn bản của bạn đẹp đến mức nào nếu nó cần một khoảng thời gian không hợp lý để hiển thị!
Để giảm thiểu một số nguy cơ tải phông chữ xuống chậm, hầu hết các trình duyệt đều triển khai thời gian chờ mà sau đó phông chữ dự phòng sẽ được sử dụng. Đây là một kỹ thuật hữu ích, nhưng đáng tiếc, các trình duyệt sẽ khác nhau trong cách triển khai thực tế.
| Trình duyệt | Lần bị tạm ngừng | Dự phòng | Hoán đổi |
|---|---|---|---|
| Chrome 35 trở lên | 3 giây | Có | Có |
| Opera | 3 giây | Có | Có |
| Firefox | 3 giây | Có | Có |
| Internet Explorer | 0 giây | Có | Có |
| Safari | Không có thời gian chờ | Không áp dụng | Không áp dụng |
- Chrome và Firefox có thời gian chờ 3 giây, sau đó văn bản được hiển thị với phông chữ dự phòng. Nếu phông chữ có thể tải xuống, thì cuối cùng một hoán đổi sẽ xảy ra và văn bản được hiển thị lại với phông chữ dự định.
- Internet Explorer có thời gian chờ 0 giây, dẫn đến việc hiển thị văn bản ngay lập tức. Nếu chưa có phông chữ yêu cầu, hệ thống sẽ sử dụng bản dự phòng và văn bản sẽ được kết xuất lại sau khi phông chữ yêu cầu có sẵn.
- Safari không có hành vi hết thời gian chờ (hoặc ít nhất là không có hành vi nào vượt quá thời gian chờ mạng cơ sở).
Tệ hơn là các nhà phát triển có quyền kiểm soát hạn chế trong việc quyết định những quy tắc này sẽ ảnh hưởng như thế nào đến ứng dụng của họ. Nhà phát triển quan tâm đến hiệu suất có thể muốn có trải nghiệm ban đầu nhanh hơn sử dụng phông chữ dự phòng và chỉ tận dụng phông chữ đẹp hơn trên web trong các lượt truy cập tiếp theo sau khi có cơ hội tải xuống. Khi sử dụng các công cụ như Font Loading API, bạn có thể ghi đè một số hành vi mặc định của trình duyệt và đạt được hiệu suất. Tuy nhiên, bạn cần phải viết một lượng không nhỏ JavaScript, sau đó phải được đưa vào trang hoặc được yêu cầu từ một tệp bên ngoài, làm phát sinh thêm độ trễ HTTP.
Để khắc phục tình huống này, Nhóm hoạt động CSS đã đề xuất một bộ mô tả @font-face mới là font-display và một thuộc tính tương ứng để kiểm soát cách một phông chữ có thể tải xuống hiển thị trước khi phông chữ đó được tải đầy đủ.
Tiến trình tải phông chữ xuống
Tương tự như các hành vi hết thời gian chờ phông chữ hiện có mà một số trình duyệt triển khai hiện nay, font-display phân chia thời gian tải phông chữ xuống thành 3 khoảng thời gian chính.
- Khoảng thời gian đầu tiên là khoảng thời gian chặn phông chữ. Trong khoảng thời gian này, nếu mặt phông chữ không được tải, thì mọi phần tử cố gắng sử dụng phần tử đó đều phải hiển thị với mặt phông chữ dự phòng không hiển thị. Nếu mặt phông chữ tải thành công trong khoảng thời gian chặn, thì hệ thống sẽ sử dụng mặt phông chữ bình thường.
- Khoảng thời gian hoán đổi phông chữ xảy ra ngay sau khoảng thời gian chặn phông chữ. Trong thời gian này, nếu mặt phông chữ không được tải, thì mọi phần tử muốn sử dụng phông chữ đó đều phải kết xuất với mặt phông chữ dự phòng. Nếu mặt phông chữ tải thành công trong khoảng thời gian hoán đổi, thì hệ thống sẽ sử dụng mặt phông chữ bình thường.
- Giai đoạn lỗi phông chữ xảy ra ngay sau khoảng thời gian hoán đổi phông chữ. Nếu phông chữ chưa được tải khi khoảng thời gian này bắt đầu, thì hệ thống sẽ đánh dấu phông chữ đó là tải không thành công, dẫn đến việc phông chữ dự phòng bình thường. Nếu không, phông chữ sẽ được sử dụng bình thường.
Khi hiểu rõ các khoảng thời gian này, bạn có thể sử dụng font-display để quyết định cách hiển thị phông chữ, tuỳ thuộc vào việc liệu phông chữ đó có được tải xuống hay không.
Chế độ hiển thị phông chữ nào phù hợp với bạn?
Để làm việc với chỉ số mô tả font-display, hãy thêm chỉ số này theo quy tắc @font-face:
@font-face {
font-family: 'Arvo';
font-display: auto;
src: local('Arvo'), url(https://fonts.gstatic.com/s/arvo/v9/rC7kKhY-eUDY-ucISTIf5PesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
}
font-display hiện hỗ trợ phạm vi giá trị sau đây auto | block | swap | fallback | optional.
tự động
auto sử dụng bất kỳ chiến lược hiển thị phông chữ nào mà tác nhân người dùng sử dụng. Hầu hết trình duyệt hiện đều có chiến lược mặc định tương tự như chiến lược chặn.
cản bóng
block cung cấp cho mặt phông chữ một khoảng thời gian khối ngắn (nên sử dụng 3 giây trong hầu hết các trường hợp) và khoảng thời gian hoán đổi vô hạn. Nói cách khác, trước tiên, trình duyệt sẽ vẽ văn bản "ẩn" nếu phông chữ chưa được tải, nhưng sẽ hoán đổi mặt phông chữ ngay khi tải. Để làm điều này, trình duyệt sẽ tạo một phông chữ ẩn danh với các chỉ số tương tự như phông chữ đã chọn nhưng tất cả các ký tự không chứa "mực". Bạn chỉ nên sử dụng giá trị này nếu trang cần hiển thị văn bản theo một kiểu chữ cụ thể thì mới có thể sử dụng trang đó.
hoán đổi
Tính năng hoán đổi cung cấp cho mặt phông chữ một khoảng thời gian khối 0 giây và khoảng thời gian hoán đổi vô hạn. Điều này có nghĩa là trình duyệt sẽ vẽ văn bản ngay lập tức bằng tính năng dự phòng nếu mặt phông chữ không được tải, nhưng sẽ hoán đổi mặt phông chữ ngay khi tải. Tương tự như tính năng chặn, bạn chỉ nên sử dụng giá trị này khi hiển thị văn bản ở một phông chữ cụ thể trên trang. Tuy nhiên, việc hiển thị bằng bất kỳ phông chữ nào vẫn sẽ nhận được thông điệp chính xác. Văn bản biểu trưng là một lựa chọn phù hợp cho việc hoán đổi vì việc hiển thị tên công ty bằng cách sử dụng phương án dự phòng hợp lý sẽ truyền tải thông điệp nhưng cuối cùng thì bạn sẽ sử dụng phông chữ chính thức.
dự phòng
fallback cho mặt phông chữ một khoảng thời gian khối cực nhỏ (hầu hết các trường hợp nên dùng 100 mili giây trở xuống) và khoảng thời gian hoán đổi ngắn (nên dùng 3 giây trong hầu hết các trường hợp). Nói cách khác, trước tiên, mặt phông chữ sẽ hiển thị với tính năng dự phòng nếu chưa tải, nhưng phông chữ sẽ được hoán đổi ngay khi tải. Tuy nhiên, nếu có quá nhiều thời gian trôi qua, bản dự phòng sẽ được dùng cho toàn bộ thời gian hoạt động còn lại của trang. Dự phòng là một lựa chọn phù hợp cho những nội dung như văn bản nội dung khi bạn muốn người dùng bắt đầu đọc càng sớm càng tốt và không muốn làm phiền trải nghiệm của họ bằng cách dịch chuyển văn bản xung quanh khi phông chữ mới sẽ tải.
không bắt buộc
tuỳ chọn cung cấp cho mặt phông chữ một khoảng thời gian khối rất nhỏ (thường là 100 mili giây trở xuống trong hầu hết các trường hợp) và khoảng thời gian hoán đổi 0 giây. Tương tự như tính năng dự phòng, đây là lựa chọn phù hợp khi phông chữ tải xuống chỉ "có thì tốt" nhưng không quan trọng đối với trải nghiệm. Giá trị không bắt buộc để trình duyệt quyết định xem có bắt đầu tải phông chữ xuống hay không (có thể chọn không tải xuống) hoặc có thể thực hiện ở mức độ ưu tiên thấp tuỳ vào giá trị mà trình duyệt cho là phù hợp nhất cho người dùng. Điều này có thể có lợi trong các trường hợp mà người dùng có kết nối yếu và việc kéo phông chữ có thể không phải là cách sử dụng tài nguyên tốt nhất.
Hỗ trợ trình duyệt
font-display hiện đứng sau cờ Tính năng nền tảng web thử nghiệm trong Chrome 49 dành cho máy tính và đang được vận chuyển trong Opera và Opera cho Android.
Bản minh hoạ
Hãy xem mẫu để thử font-display. Đối với các nhà phát triển quan tâm đến hiệu suất, công cụ này có thể là một
công cụ hữu ích hơn nữa trong thanh công cụ của bạn!