Việc quyết định hành vi cho phông chữ trên web khi phông chữ đó đang tải có thể là
kỹ thuật điều chỉnh hiệu suất quan trọng. Bộ 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 hiển thị (hoặc dự phòng) phông chữ trên web của họ,
tuỳ thuộc vào thời gian tải chúng.
Chênh lệch trong hiển thị phông chữ hiện nay
Phông chữ web giúp nhà phát triển có thể kết hợp kiểu chữ phong phú vào dự án của họ với sự đánh đổi rằng nếu người dùng chưa sở hữu trình duyệt phải dành một chút thời gian để tải xuống. Vì mạng truyền hình có thể không ổn định, thì thời gian tải xuống này có khả năng ảnh hưởng xấu đến của bạn. Suy cho cùng thì sẽ không ai quan tâm đến độ đẹp của văn bản nếu mất nhiều thời gian để hiển thị!
Để giảm thiểu một số nguy cơ tải xuống phông chữ chậm, hầu hết các trình duyệt đều triển khai hết 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 rất tiếc là các trình duyệt khác nhau trong cách triển khai thực tế.
| Trình duyệt | Hết giờ | 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ị có phông chữ dự phòng. Nếu phông chữ có thể tải xuống, thì cuối cùng hệ thống sẽ hoán đổi xảy ra và văn bản được kết xuất lại bằng phông chữ dự kiến.
- Internet Explorer có thời gian chờ 0 giây, dẫn đến văn bản ngay lập tức kết xuất hình ảnh. Nếu phông chữ bạn yêu cầu chưa có sẵn, hệ thống sẽ sử dụng phông chữ 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ó gì ngoài mạng cơ sở thời gian chờ).
Tệ hơn là, nhà phát triển còn có quyền kiểm soát hạn chế trong việc quyết định cách xử lý sẽ ảnh hưởng đến ứng dụng của chúng. Nhà phát triển quan tâm đến hiệu suất có thể ưu tiên để có trải nghiệm ban đầu nhanh hơn bằng cách sử dụng phông chữ dự phòng và chỉ tận dụng phông chữ đẹp hơn trên web vào các lượt truy cập tiếp theo sau khi phông chữ đó có thời gian tải xuống. Khi sử dụng các công cụ như API tải phông chữ, có thể ghi đè một số các hành vi mặc định của trình duyệt và đạt được hiệu suất, nhưng điều này dẫn đến để ghi một lượng JavaScript không nhỏ. Sau đó, được đặt vào trang hoặc được yêu cầu từ một tệp bên ngoài, làm phát sinh Độ trễ của HTTP.
Để khắc phục tình trạng này, Nhóm công tác CSS đã đề xuất một
Phần mô tả @font-face, font-display và một thuộc tính tương ứng cho
kiểm soát cách phông chữ có thể tải xuống hiển thị trước khi tải đầy đủ.
Tiến trình tải phông chữ xuống
Tương tự như 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
hôm nay, font-display phân đoạn thời gian tồn tại của một phông chữ tải xuống thành ba phân đoạn chính
.
- Khoảng thời gian đầu tiên là khoảng thời gian chặn phông chữ. Trong thời gian này, nếu phông chữ không được tải. Mọi phần tử cố gắng sử dụng phông chữ đó đều phải hiển thị có kiểu phông chữ dự phòng vô hình. Nếu mặt phông chữ tải thành công trong khoảng thời gian khoảng thời gian chặn, sau đó, phông chữ sẽ được dùng 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 khối phông chữ. Trong khoảng thời gian này, nếu phông chữ không được tải, thì bất kỳ phần tử nào cố gắng sử dụng phông chữ đó phải hiển thị với phông chữ dự phòng. Nếu phông chữ thành công sẽ tải trong khoảng thời gian hoán đổi, khi đó, phông chữ sẽ được dùng bình thường.
- Khoảng thời gian 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, tệp đó được đánh dấu là không tải được, dẫn đến lỗi phông chữ dự phòng bình thường. Nếu không, phông chữ khuôn mặt này được dùng bình thường.
Khi hiểu được các khoảng thời gian này, bạn có thể sử dụng font-display để quyết định cách
phông chữ cần hiển thị tuỳ thuộc vào việc phông chữ đó được tải xuống hay không.
Màn hình 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 vào quy tắc @font-face của bạn:
@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ợ khoảng giá trị auto | block | swap | fallback | optional sau.
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 đang có chiến lược mặc định tương tự như chặn.
chặn
block giúp giao diện phông chữ có khoảng thời gian chặn ngắn (hầu hết các trường hợp nên dùng là 3 giây) và khoảng thời gian hoán đổi vô hạn. Nói cách khác, trình duyệt sẽ vẽ các đường dẫn "ẩn" văn bản lúc đầu, nếu phông chữ không được tải nhưng hoán đổi phông chữ ngay khi phông chữ tải. Để làm được việc này, trình duyệt sẽ tạo một kiểu phông chữ ẩn danh cùng với các chỉ số tương tự như phông chữ đã chọn nhưng có tất cả ký tự đều không chứa "mực". Chỉ nên sử dụng giá trị này nếu hiển thị văn bản trong một kiểu chữ cụ thể là bắt buộc để trang có thể sử dụng được.
hoán đổi
Hàm swap cho phông chữ có khoảng thời gian khối bằng 0 giây và khoảng thời gian hoán đổi vô hạn. Tức là trình duyệt sẽ vẽ văn bản ngay lập tức bằng chế độ dự phòng nếu phông chữ chưa được tải nhưng sẽ hoán đổi phông chữ ngay khi tải. Tương tự như block, giá trị này chỉ nên được sử dụng khi hiển thị văn bản bằng một phông chữ cụ thể quan trọng đối với trang, nhưng hiển thị bằng bất kỳ phông chữ nào vẫn sẽ có tin nhắn. Văn bản biểu trưng là một lựa chọn phù hợp cho chức năng hoán đổi vì khi 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 bạn sẽ cuối cùng sẽ sử dụng kiểu chữ chính thức.
dự phòng
dự phòng khiến cho phông chữ có khoảng thời gian khối cực kỳ nhỏ (100 mili giây trở xuống nên dùng trong hầu hết các trường hợp) và khoảng thời gian hoán đổi ngắn (nên sử dụng 3 giây trong hầu hết các trường hợp). Nói cách khác, phông chữ được hiển thị với kiểu chữ dự phòng tại đầu tiên nếu phông chữ không được 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, phương án dự phòng sẽ được dùng cho phần còn lại của trang suốt đời. dự phòng là một lựa chọn phù hợp cho những tính năng như văn bản nội dung nếu bạn muốn muốn người dùng bắt đầu đọc sớm nhất có thể và không muốn làm phiền trải nghiệm của họ bằng cách di chuyển văn bản khi phông chữ mới tải vào.
tùy chọn
không bắt buộc khiến cho mặt phông chữ có khoảng thời gian khối cực nhỏ (100 mili giây trở xuống là nên dùng trong hầu hết các trường hợp) và thời gian hoán đổi bằng 0 giây. Tương tự như dự phòng, đây là một lựa chọn phù hợp khi phông chữ tải xuống "hữu ích" nhưng không quan trọng đối với trải nghiệm. Giá trị không bắt buộc tuỳ thuộc vào trình duyệt để quyết định xem có bắt đầu tải xuống phông chữ hay không, trình duyệt có thể chọn không làm hay có thể thực hiện với mức độ ưu tiên thấp, tuỳ thuộc vào những gì ứng dụng cho là sẽ tốt nhất cho người dùng. Điều này có thể có lợi trong trường hợp người dùng đang sử dụng kết nối yếu và kéo phông chữ xuống 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 đang sử dụng cờ Tính năng nền tảng web thử nghiệm
trong Chrome 49 dành cho máy tính và được vận chuyển trong Opera và Opera dành cho Android.
Bản minh hoạ
Hãy xem mẫu để cung cấp
font-display một cú sút. Đối với các nhà phát triển quan tâm đến hiệu suất,
nhà phát triển có thể lựa chọn
trong thanh công cụ của mình!