html - 是否可以通过离线存储缓存清单加载 webfonts？

Question

我知道我可以通过 html/css 导入我的字体，但我想知道这是否是一种可行的方法。

谢谢！

Answer 1

是的，如果您将字体添加到清单文件中，它们将与其余文件一起下载，然后可以离线使用。 字体需要在离线应用所在的同一台服务器上可用，因为您无法缓存不在域中的资源。例如，您无法缓存 Google Web 字体。 我一直在对此进行一些测试，似乎谷歌的字体在 Chrome 和 Opera 上缓存得很好，只有 Firefox 有问题。清单的“不在您的域中”限制仅适用于通过 HTTPS 提供的情况。

您仍然需要使用@font-faceCSS 中的规则引用字体，以便它们在您的页面中使用。例如，在您的清单文件中：

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 文件。