通过离线存储缓存清单加载Web字体是否可行？

Question

我了解我可以通过html/css导入我的字体，但我想知道这是否可行。

谢谢！

- The John Smith

Answer 1

是的，如果您将字体添加到清单文件中，它们将与其余文件一起下载，然后离线可用。需要注意，字体必须从您离线应用所在的相同服务器上获取，因为无法缓存不在您域上的资源。例如，您无法缓存Google Web Font。我已经进行了一些测试，似乎Chrome和Opera可以很好地缓存来自Google的字体，只有Firefox存在问题。清单中的“不在您域上”的限制仅适用于在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获取Gentium文件。

- robertc

---

太棒了！我将来一定会使用它！ - The John Smith

如果您想下载所有谷歌字体格式，请查看此StackOverflow帖子：https://dev59.com/sWkv5IYBdhLWcg3w3Eel - Laurens Rietveld