Kiểm soát web typography với việc hiển thị CSS font

Chúng ta cố gắng giải thích bằng nhiều cách khác nhau để cho trình duyệt hiểu làm thế nào để load được web font

Tải fonts web tùy chỉnh cho lần đầu tiên phải gánh chịu một hình phạt hiệu suất trên một trang web. Khi các nhà phát triển web và thiết kế, chúng tôi luôn luôn phấn đấu để tạo ra các trang web đẹp và hiệu suất tốt. Tuy nhiên, thường là hai mục tiêu sẽ nẩy sinh xung đột. Các thuộc tính CSS font chữ hiển thị cho phép một sự cân bằng tốt hơn giữa tính thẩm mỹ và hiệu suất của một trang web

Với thuộc tính font-display, bạn có thể cung cấp cho trình duyệt của bạn gợi ý về những gì chiến lược sử dụng font-loading - ví dụ, tầm quan trọng của fonts web của bạn, và làm thế nào một phông chữ hệ thống dự phòng nên được sử dụng trong trường hợp font webs của bạn tải quá lâu. Bạn có thể thêm thuộc tính font-display cho quy tắc @font-face.

@font-face {
 font-family: ‘My-Custom-Font’;
 font-display: fallback;
}

Fallback

Nếu bạn chỉ định một giá trị của thuộc tính font-display là fallback, thì trình duyệt sẽ đợi ít hơn một giây cho các phông chữ tuỳ chỉnh trên web của bạn tải về. Nếu font tùy chỉnh không sẵn sàng vào thời gian này, fallback (giá trị của thuộc tính font-display) sẽ được sử dụng cho vòng đời của trang web. Điều này sẽ tốt cho người sử dụng, vì họ sẽ không phải nhìn vào “blank” text trong thời gian .

Việc nắm bắt, tất nhiên, web font của bạn sẽ không được sử dụng trong việc load trang.mà khả năng có thể ảnh hưởng đến cái nhìn và cảm nhận của bố cục trang web của bạn. font-display: fallback là khá nghiêm ngặt: nếu phông chữ web của bạn kết thúc tải sau thời gian, nó vẫn sẽ không được sử dụng.

Swap

Nếu phông chữ web tùy chỉnh của bạn là rất quan trọng để thiết kế trang web của bạn, có thể là một lựa chọn tốt cho bạn. font-display: swap này sẽ ngay lập tức sử dụng một phông chữ dự phòng. Tại thời điểm này, ngay sau khi phông chữ web của bạn tải về xong, có thể là sau một giây hoặc năm giây, trình duyệt sẽ trao đổi font dự phòng với phông chữ web của bạn. Nó đáng chú ý, mặc dù, hoán đổi font có thể được gây khó chịu cho người sử dụng, đặc biệt là khi họ đã tập trung vào việc đọc các văn bản.

Block

Cuối cùng, nếu bạn quyết định phông chữ web của bạn có tầm quan trọng cao, font-display: block có thể là một lựa chọn. Điều này gợi ý để trình duyệt nó nên chờ đợi một thời gian khá lâu (ba giây) để tải về phông chữ. Trong thời gian này, người dùng sẽ không thấy bất kỳ văn bản. Sau ba giây, một dự phòng được sử dụng.

Từ thời điểm này, dù có bao lâu font web sẽ tự động download, trình duyệt sẽ vẫn trao đổi các phông chữ mới được tải về với font dự phòng, ngay cả khi người dùng đã bắt đầu di chuyển và việc đọc trang của bạn.

Vậy nên sử dụng như thế nào?

Nếu hiệu năng của web là việc ưu tiên, và không quan trọng về việc tùy chỉnh font, thì việc sử dụng font-display: fallback là sự lựa chọn tối ưu, nó cung cấp một trải nghiệm tốt cho ngươi dùng.Nếu cuối cùng hiển thị font tuỳ chỉnh là quan trọng, thì swap hoặc block có thể là sự lựa chọn cho bạn.

Tài liệu tham khảo:

https://www.reddit.com/r/Frontend/

http://www.creativebloq.com/advice/control-web-typography-with-css-font-display