是否可以通过脱机存储缓存清单加载Webfonts？

Question

我知道我可以通过html/css导入我的字体,但我想知道这是否是一种可实现的方法.

谢谢!

Answer 1

是的,如果您将字体添加到清单文件中,它们将与其余文件一起下载,然后可以脱机使用. 这些字体需要从您的脱机应用程序所在的同一服务器上提供,因为您无法缓存不在您的域中的资源.例如,您无法缓存Google Web字体. 我一直在对此进行一些测试,似乎来自Google的字体在Chrome和Opera上都可以很好地缓存,只有Firefox有问题.对于清单的"不在您的域上"限制仅适用于通过HTTPS提供的限制.

您仍然需要@font-face在CSS中引用带有规则的字体,以便在页面中使用它们.例如,在您的清单文件中:

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