Cái quái gì vậy, phải không? Tại sao tôi không chỉ cho nó biết phông chữ tôi muốn sử dụng và đó là điều đó? Toàn bộ ý tưởng ở đây là dự phòng. Trình duyệt sẽ cố gắng sử dụng phông chữ bạn đã chỉ định trước (trong trường hợp này là Lato), nhưng nếu trình duyệt không có sẵn phông chữ đó, nó sẽ tiếp tục đi xuống danh sách đó. Vì vậy, thực sự dài dòng ở đây, quy tắc đó đang nói là:

  • Tôi muốn sử dụng phông chữ Lato ở đây.
  • Nếu bạn không có, hãy thử Lucida Grande tiếp theo.
  • Nếu bạn không có điều đó, hãy thử Tahoma.
  • Còn lại đều không thành công, hãy sử dụng bất cứ thứ gì bạn có cho từ khóa chung chung Sans-Serif

Vì vậy, trong tình huống nào một trình duyệt sẽ không có phông chữ mà bạn yêu cầu? Đó là điều khá phổ biến. Chỉ có một số ít phông chữ được coi là an toàn trên web – có nghĩa là hầu hết các máy tính truy cập trang web của bạn đều đã cài đặt phông chữ đó và vì vậy trình duyệt có thể sử dụng nó. Hãy nghĩ: Arial, Times New Roman, Courier, Georgia, Verdana và một số khác.
Nhưng hầu hết các trang web, ngày nay, sử dụng phông chữ web tùy chỉnh. Họ tải lên một phông chữ dưới dạng tài nguyên (giống như một trang web tải chính CSS dưới dạng tài nguyên, hoặc hình ảnh hoặc JavaScript), thì phông chữ đó sẽ có sẵn để sử dụng. Phổ biến rộng rãi Phông chữ Google làm cho điều đó khá rõ ràng:

Ngay cả khi bạn tải phông chữ theo cách này, vẫn có khả năng phông chữ đó không tải. Mặc dù Google là một máy chủ lưu trữ nói chung rất đáng tin cậy, nhưng bạn không kiểm soát các máy chủ của họ; họ làm. Thậm chí phổ biến hơn, kết nối mạng kém có thể ngăn không cho tải phông chữ. Trong bất kỳ trường hợp lỗi tải phông chữ nào, đó là một tình huống khác mà ngăn xếp phông chữ dự phòng có ích.
Giả sử tôi đang sử dụng phông chữ tùy chỉnh Merriweather và tôi thiết lập ngăn xếp phông chữ của mình như sau:

html {
  font-family: Merriweather,   Impact , Serif;
}

Nếu Merriweather không tải được (hoặc có tải, nhưng tải theo cách mà nó bật vào đúng vị trí sau khi tải – còn được gọi là FOUT), chúng ta sẽ thấy một cái gì đó như sau:

Tốt hơn là để phông chữ của bạn trở lại một cái gì đó gần với lựa chọn hàng đầu của bạn hơn là một cái gì đó hoàn toàn không liên quan! Có một công cụ tuyệt vời do Monica Dinculescu gọi Trình khớp kiểu phông chữ nơi bạn có thể chơi với các dự phòng (đó là cách tôi tạo GIF ở trên).

Trong ví dụ trên, chúng ta có thể thấy rằng Georgia là một phông chữ dự phòng đẹp hơn nhiều so với Va chạm Là! Ví dụ này lạ mắt hơn một chút so với việc chỉ thay đổi phông chữ. Một số cài đặt khác đã được thay đổi để làm cho chúng khớp chặt chẽ với nhau. Để tận dụng điều đó, bạn đang ở trong lãnh thổ tải phông chữ, điều này hơi phức tạp. Đặt cược tốt nhất của bạn là tham khảo ý kiến ​​của Zach Leatherman’s Hướng dẫn toàn diện để tải phông chữ. Trong mọi trường hợp, chọn một phông chữ dự phòng đẹp là điều đáng làm.

Nhân vật cá nhân

Một lưu ý thú vị về phông chữ dự phòng là nó không phải là tất cả hoặc không có gì. Các ký tự riêng lẻ trong một phông chữ có thể rơi xuống ngăn xếp nếu phông chữ được chỉ định không có sẵn ký tự đó.
Như một ví dụ điển hình, tôi sẽ tải phông chữ tùy chỉnh Source Code Pro từ Google Fonts nhưng tôi sẽ buộc nó chỉ chứa một số ít các chữ cái.

Bạn có thể thấy trong câu đầu tiên các phông chữ dự phòng đã hoạt động như thế nào và kết quả cuối cùng không phải là thảm họa (như câu thứ hai) mặc dù phông chữ tùy chỉnh không có sẵn một số ký tự. Điều này sẽ có nhiều khả năng xảy ra hơn với những thứ như ký tự ASCII không phổ biến hoặc thậm chí các ký tự có dấu như ü, ā, hoặc ñ.
Như một điều thú vị khác, đây là cách sử dụng khả năng dự phòng ký tự của CSS để làm một điều gì đó độc đáo:

Đọc thêm

Trong bài viết này, chúng tôi đã giải thích Kiến thức cơ bản về CSS: Ngăn xếp phông chữ dự phòng để có kiểu chữ web mạnh mẽ hơn. Đừng ngần ngại cho chúng tôi biết nếu bạn có câu hỏi hoặc nhận xét về bài viết này. Để lại bình luận bên dưới và geekcarrot.net sẽ phản hồi trong thời gian sớm nhất.