Có thể tải webfonts thông qua tệp kê khai bộ nhớ cache lưu trữ ngoại tuyến không?

Question

Tôi hiểu rằng tôi có thể nhập phông chữ của mình thông qua html/css nhưng tôi tự hỏi liệu đây có phải là cách tiếp cận có thể đạt được hay không.

Cảm ơn!

Answer 1

Có, nếu bạn thêm phông chữ vào tệp kê khai của mình, chúng sẽ được tải xuống cùng với phần còn lại của tệp và sau đó khả dụng khi ngoại tuyến. Phông chữ sẽ cần phải có sẵn từ cùng một máy chủ nơi ứng dụng ngoại tuyến của bạn, bởi vì bạn không thể lưu trữ tài nguyên không nằm trên miền của mình. Ví dụ: bạn không thể lưu vào bộ nhớ cache của Google Web Font. Tôi đã thực hiện một số thử nghiệm về điều này, có vẻ như phông chữ từ Google được lưu vào bộ nhớ cache tốt trên Chrome và Opera, only Firefox has problems. Giới hạn 'không thuộc miền của bạn' cho tệp kê khai chỉ áp dụng khi được phân phát qua HTTPS.

Bạn sẽ vẫn cần phải tham chiếu phông chữ với quy tắc @font-face trong CSS để chúng được sử dụng trong trang của bạn. Ví dụ, trong file manifest của bạn:

CACHE MANIFEST 
# v1 
index.html 
style.css 
GenBasR-webfont.eot 
GenBasR-webfont.woff 
GenBasR-webfont.ttf 
GenBasR-webfont.svg 

Trong style.css:

@font-face { 
    font-family: 'GentiumBasicRegular'; 
    src: url('GenBasR-webfont.eot'); 
    src: url('GenBasR-webfont.eot?iefix') format('eot'), 
     url('GenBasR-webfont.woff') format('woff'), 
     url('GenBasR-webfont.ttf') format('truetype'), 
     url('GenBasR-webfont.svg#webfontLblSsz1O') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

body { 
    font-family: 'GentiumBasicRegular'; 
} 

Lấy file Gentium từ Font Squirrel.