Trang này được dịch bởi Cloud Translation API.

Kiểm soát hiệu suất phông chữ bằng chế độ hiển thị phông chữ

Rob Dodson

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à một kỹ thuật điều chỉnh hiệu suất quan trọng. Thuộc tính 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 sẽ hiển thị (hoặc dự phòng), tuỳ thuộc vào thời gian tải.

Chênh lệch trong hiển thị phông chữ hiện nay

Phông chữ trên web cho phép nhà phát triển tích hợp kiểu chữ phong phú vào dự án của họ. Đổi lại, nếu người dùng chưa có kiểu chữ thì trình duyệt sẽ phải dành thời gian tải 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 xấu đến trải nghiệm của người dùng. Suy cho cùng, sẽ không ai quan tâm đến độ đẹp của văn bản nếu mất một khoảng thời gian không hợp lý để hiển thị văn bản!

Để 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 mộ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 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 sẽ hiển thị bằng 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 cũng sẽ diễn ra và văn bản được kết xuất lại với phông chữ dự kiến.
Internet Explorer có thời gian chờ 0 giây nên sẽ hiển thị văn bản ngay lập tức. Nếu phông chữ yêu cầu chưa có sẵn, thì 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ữ được 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 thời gian chờ của mạng cơ sở).

Tệ hơn, các nhà phát triển có quyền kiểm soát hạn chế trong việc quyết định mức độ ảnh hưởng của các quy tắc này đối với ứng dụng của họ. Một 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 bằng cách sử dụng phông chữ dự phòng và chỉ tận dụng phông chữ web đẹp hơn trong các lần truy cập tiếp theo sau khi có thời gian tải xuống. Khi sử dụng các công cụ như API tải phông chữ, bạn có thể ghi đè một số hành vi mặc định của trình duyệt và đạt được mức tăng hiệu suất. Tuy nhiên, bạn phải trả chi phí là phải ghi một lượng JavaScript không nhỏ, sau đó phải được chèn vào trang hoặc được yêu cầu từ một tệp bên ngoài, làm tăng thêm độ trễ HTTP.

Để giúp khắc phục tình trạng này, Nhóm làm việc CSS đã đề xuất một chỉ số 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 phông chữ có thể tải xuống hiển thị trước khi được 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 hiện nay, font-display chia thời gian hoạt động của một phông chữ tải 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 phông chữ không được tải, thì mọi phần tử cố gắng sử dụng phông chữ đó đều phải kết xuất bằng một mặt 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 chặn, thì mặt 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ì mọi phần tử cố sử dụng phông chữ đó đều phải hiển thị bằng một 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ì mặt 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, thì hệ thống sẽ đánh dấu phông chữ đó là không tải được, dẫn đến việc phông chữ dự phòng bình thường sẽ xảy ra. Nếu không, phông chữ sẽ được dùng bình thường.

Khi nắm đượ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ữ sẽ hiển thị, tuỳ thuộc vào việc phông chữ được tải xuống hay thời điểm tải xuố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 các 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.

chặn

block mang đến cho mặt phông chữ một khoảng thời gian ngắn (nên là 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, ban đầu trình duyệt sẽ vẽ văn bản "ẩn" nếu phông chữ không được tải, nhưng sẽ hoán đổi mặt phông chữ ngay khi tải. Để thực hiện việc này, trình duyệt sẽ tạo một kiểu 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ả ký tự đều không chứa "mực". Bạn chỉ nên sử dụng giá trị này nếu kết xuất văn bản ở 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 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ư block, bạn chỉ nên sử dụng giá trị này khi kết xuất văn bản ở một phông chữ cụ thể có ý nghĩa quan trọng đối với trang, nhưng việc hiển thị bằng bất kỳ phông chữ nào vẫn sẽ truyền tải đúng thông điệp. 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ì 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 bạn sẽ sử dụng kiểu chữ chính thức.

dự phòng

dự phòng cho phông chữ có khoảng thời gian khối cực kỳ nhỏ (nên 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 ngắn (nên là 3 giây trong hầu hết các trường hợp). Nói cách khác, trước tiên, phông chữ sẽ được hiển thị với tính năng dự phòng nếu không được tải, nhưng phông chữ sẽ được hoán đổi ngay khi tải. Tuy nhiên, nếu quá nhiều thời gian trôi qua, tính năng dự phòng sẽ được dùng trong 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, trong đó 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 di chuyển văn bản xung quanh khi phông chữ mới được tải vào.

không bắt buộc

không bắt buộc mang lại cho mặt phông chữ một khoảng thời gian khối cực kỳ nhỏ (nên 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 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 là "có được" nhưng không quan trọng đối với trải nghiệm. Giá trị không bắt buộc tùy thuộc vào việc 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 thực hiện hoặc có thể thực hiện với mức độ ưu tiên thấp, tùy thuộc vào yếu tố mà trình duyệt cho rằng phù hợp nhất với người dùng. Điều này có thể có lợi trong trường hợp người dùng đang có kết nối yếu và việc kéo phông chữ xuống có thể không phải là cách sử dụng tài nguyên phù hợp 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à được vận chuyển trong Opera và Opera dành cho Android.

Bản minh hoạ

Hãy xem mẫu để thử font-display. Đối với những nhà phát triển quan tâm đến hiệu suất, đâ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!