Trình duyệt có cần tải xuống lại các phông chữ tùy chỉnh mỗi lần truy cập trang web không?

Question

Giả sử tôi có một trang web mà tôi đã tùy chỉnh phông chữ và tất cả các tệp .otf có dung lượng khoảng 1MB.

Bây giờ, khi người dùng truy cập trang web, phông chữ sẽ được tải xuống. Câu hỏi đặt ra là, các phông chữ này sẽ vẫn còn trong trình duyệt của người dùng như được cài đặt mọi lúc? I E. Ngay cả khi người dùng tắt trình duyệt, các phông chữ có còn lại trong đó không? Hoặc là các tệp .otf giống như tất cả các tệp .css .html? Mà có thể được lưu trữ nhưng sau đó cần phải được tải xuống một lần nữa?

Nếu sau này, chúng ta xử lý vấn đề này như thế nào? Tôi có nghĩa là làm cho người dùng tải về 1MB phông chữ là không tốt cho UX. Các trang web khác đối phó với vấn đề này như thế nào? Một số loại lưu trữ cục bộ có được sử dụng không?

Answer 1

Mặc dù điều này có thể phụ thuộc một chút vào trình duyệt nhưng phông chữ được tải xuống mỗi lần và không được lưu trong bộ nhớ cache trong trình duyệt. Điều này là hiển nhiên bởi FOUT (Flash của Unstyled Text). Bạn có thể nhìn vào đây để biết thêm chi tiết và một giải pháp: https://stackoverflow.com/a/8844467/2407962

Answer 2

Giả sử tôi có một trang web trong đó tôi đã tùy chỉnh phông chữ, và tất cả các file .otf khoảng 1MB.

Tôi đã sử dụng phông chữ google trên một trong những trang web của tôi, chỉ có 2.6KB nói chung.

Bây giờ, khi người dùng truy cập trang web, phông chữ sẽ được tải xuống. Câu hỏi là, các phông chữ này sẽ vẫn còn trong trình duyệt của người dùng là cài đặt mọi lúc? I E. Ngay cả khi người dùng tắt trình duyệt, các phông chữ có còn lại trong đó không? Hoặc là các tệp .otf giống như tất cả các tệp tin .css .html? Mà có thể được lưu trữ nhưng sau đó cần phải được tải về một lần nữa?

Tôi thấy, Trang web của tôi luôn tìm nạp phông chữ khi người dùng truy cập trang web. Ngay cả khi người dùng không xóa bộ nhớ cache của trình duyệt, trang web vẫn sẽ tìm nạp các phông chữ như css và html, khi truy cập trang web.

Nếu sau này, chúng ta xử lý vấn đề này như thế nào? Tôi có nghĩa là làm cho người dùng tải về 1MB phông chữ không tốt cho UX. Cách các trang web khác xử lý với sự cố này? Một số loại lưu trữ cục bộ có được sử dụng không?

Mã hóa gzip có thể giúp bạn.

Đây là trải nghiệm của tôi và tôi không thể tìm thấy các cách tiếp cận khác khi tôi kiểm tra. Có thể người khác có thể đề xuất một cách tiếp cận tốt hơn.

Answer 3

Tất cả các bao gồm bên ngoài trong một trang có thể được lưu trong bộ nhớ cache: ví dụ:

• hình ảnh (GIF, JPG, PNG)
• CSS stylesheets
• Javascript file/JSON
• âm thanh
• video
• vv

Điều quan trọng là đặt tiêu đề phản hồi HTTP phù hợp để cho phép chúng được lưu trong bộ nhớ cache miễn là bạn muốn.

//PHP style, other server lang syntaxes will vary 
header("Cache-Control: max-age=31536000"); //365 days 

Bạn không thể đảm bảo rằng người dùng cuối sẽ giữ chúng trong bộ nhớ cache, nhưng các tiêu đề Cache-Control cho trình duyệt bao lâu họ thể giữ chúng cho.

Rất tiếc, một số người dùng đã định cấu hình trình duyệt để xóa bộ nhớ cache khi đóng hoặc chỉ duy trì bộ nhớ cache rất nhỏ. Bạn có thể theo dõi nhật ký/số liệu máy chủ web của mình để xem liệu người dùng của bạn có đang lưu vào bộ nhớ cache tốt hay không.