Trong CSS có cần thiết cho phông chữ sao lưu khi áp dụng phông chữ tùy chỉnh cho một trang web?

Question

Trong CSS tại sao phông chữ dự phòng được đề xuất nếu tôi đang tải lên phông chữ tùy chỉnh để sử dụng với trang web?

Tôi nghĩ rằng phông chữ sao lưu chỉ cần thiết trong trường hợp khách hàng không có lựa chọn thứ nhất/thứ 2/thứ 3..có được cài đặt.

Ví dụ nếu bạn có mã này:

@font-face { 
    font-family: MyCustomFont; 
    src: url('../fonts/MyCustomFont.ttf'); 
} 

Tại sao điều này cần thiết?

body { 
    font-family: MyCustomFont, Arial, Helvetica, sans-serif; 
} 

Answer 1

Nó không phải cần thiết để xác định một phông chữ chồng, nhưng nó giúp làm suy giảm một cách duyên dáng trong những trường hợp khó hiểu khi một trình duyệt không thể sử dụng phông chữ bằng cách nào đó, ví dụ nếu yêu cầu HTTP cho tệp phông chữ hết thời gian, bản thân tệp phông chữ sẽ bị hỏng hoặc không thể sử dụng được, trình duyệt không hỗ trợ bất kỳ định dạng phông chữ nào trong số các định dạng phông chữ khác.

Bạn nên cố gắng hết sức để đảm bảo phông chữ tùy chỉnh được tải xuống và sử dụng đúng cách, tất nhiên. Nhưng mọi thứ có thể xảy ra và đôi khi không nằm trong tầm kiểm soát của bạn, do đó, nó không đau khi vẫn có thứ gì đó tốt đẹp để quay trở lại. Đó là lý do tại sao chúng được gọi là phông chữ dự phòng hoặc dự phòng :)

Answer 2

Tôi đã tìm ra cách tích hợp Google Font mà không gặp bất kỳ vấn đề nào thường thấy khi phông chữ của bên thứ ba được sử dụng.

Trước hết, chúng tôi biết các tệp Google Fonts của chúng tôi có định dạng woff và có thể không hoạt động trên tất cả các trình duyệt.

Thứ hai, nếu Google Cloud hoặc kẻ quấy rối khác ngăn tải xuống tệp phông chữ từ máy chủ của chúng tôi do hạn chế bộ nhớ cache hoặc giới hạn mạng khác, chúng tôi biết trạng thái giả kết nối này sẽ hỗ trợ phông chữ woff từ Google Fonts.

Để đảm bảo phông chữ vẫn giữ nguyên khi thêm phông chữ Google, tôi khuyên bạn không nên xóa phông chữ tự lưu trữ trừ khi nguyên đơn được xác minh yêu cầu bạn làm như vậy vì lý do quyền sở hữu.

Thay vì xóa phông chữ tự lưu trữ là khóa thực sự cho tính tương thích trên nhiều trình duyệt thực, hãy tạo một mục nhập phông chữ giống nhau trong CSS chỉ định tiêu đề phông chữ của nó là bên thứ 3 chẳng hạn như: 'ArialVanityGoogleFonts'.

Sử dụng built-in phông chữ fallback csv của trình duyệt và bao gồm các phông chữ như sau: ArialVanity, ArialVanityGoogleFonts, Arial