HTML5 离线缓存 google font api答案

【问题标题】：HTML5 offline cache google font apiHTML5 离线缓存 google font api
【发布时间】：2010-05-21 14:30:18
【问题描述】：

我正在尝试创建一个离线 HTML5 测试应用程序，并同时使用新的 google fonts api。有谁知道如何缓存远程字体？简单地将 api 调用放在缓存清单中是行不通的，我认为这是因为 api 实际上加载了其他文件（ttf、eot 等）。

如果可以离线使用字体 api，有什么想法吗？

作为参考，这是我正在打的电话：

http://fonts.googleapis.com/css?family=IM+Fell+English|Molengo|Reenie+Beanie

【问题讨论】：

标签： caching html offline font-face

【解决方案1】：

如果您将该 URL 粘贴到浏览器地址栏中，您将看到 CSS 链接到的文件：

http://themes.googleusercontent.com/font?kit=txVk61PTIsDrQQj2fK-76Q
http://themes.googleusercontent.com/font?kit=ljpKc6CdXusL1cnGUSamX_cCQibwlboQP4eCflnqtq0
http://themes.googleusercontent.com/font?kit=xwIisCqGFi8pff-oa9uSVOj-KzHqS7w8OFmqoAXdQwE

【讨论】：

但你必须小心。 Google 会根据您请求的操作系统为您提供不同的字体文件。因此，您应该为所有操作系统添加所有字体文件
确实如此。这个stackoverflow问题描述了一种缓存所有文件扩展名的方法：stackoverflow.com/questions/7042834/…

【解决方案2】：

Robertc 的方法是解决方案...

即，将 google 提供的链接粘贴到您的浏览器中，然后将引用的所有文件添加到您的清单中。

在我的例子中，我引用了

<link href='http://fonts.googleapis.com/css?family=Patua+One' rel='stylesheet' type='text/css'>

只包含以下样式定义

@font-face {
    font-family: 'Patua One';
    font-style: normal;
    font-weight: 400;
    src: local('Patua One'), local('PatuaOne-Regular'), url('http://themes.googleusercontent.com/static/fonts/patuaone/v3/yAXhog6uK3bd3OwBILv_SD8E0i7KZn-EPnyo3HZu7kw.woff') format('woff');
}

因此，要让字体在缓存（离线或不离线）时正常工作，您必须将“src”中引用的 URL 添加到清单中。

【讨论】：