是否可以通過脫機存儲緩存清單加載webfonts？

Question

我知道我可以通過html/css導入我的字體，但我想知道這是否可行。

謝謝！

Answer 1

是的，如果您將字體添加到清單文件中，它們將與其餘文件一起下載，然後脫機使用。 字體將需要從離線應用程序所在的同一臺服務器上提供，因爲您無法緩存不在您的域上的資源。例如，您無法緩存Google Web字體。 我一直在做這方面的一些測試，似乎谷歌的字體在Chrome和Opera上都緩存得很好，only Firefox has problems。清單中的「不在您的域上」限制僅適用於通過HTTPS提供服務時。

您仍然需要在CSS中使用@font-face規則引用字體，以便在頁面中使用它們。例如，在您的清單文件：

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

在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'; 
} 

從Font Squirrel獲取萬民法文件。