Webfont(字体很棒)不能正常脱机工作

Question

在我的应用程序离线时,我一直在使用webfonts(字体非常具体)显示问题.

所以我在清单中有我的字体

fonts/fontawesome-webfont.ttf?v4.1.0

当应用程序首次在线加载时,ttf文件会加载并存储在appcache中并正确显示.

但是,一旦断开网络以使应用程序脱机运行,除了基于字体的图标(它们显示为方框,就像没有加载字体一样)时,一切正常

我查看了chrome的appcache(chrome:// appcache-internals),文件就在那里

Explicit,   https://mysite.com/fonts/fontawesome-webfont.ttf?v4.1.0 141 kB

我可以访问该文件,标题似乎是正确的

HTTP/1.1 200 OK
Content-Type: font/ttf
Last-Modified: Fri, 23 May 2014 07:40:31 GMT
Accept-Ranges: bytes
ETag: "cbe2e465a76cf1:0"
Server: Microsoft-IIS/8.5
X-Powered-By: ASP.NET
Date: Thu, 05 Jun 2014 08:05:57 GMT
Content-Length: 141564

chrome中有一些可疑的东西.

Application Cache Error event: Manifest fetch failed (6) https://mysite.com/appcache.manifest 

但我认为这仅仅是因为应用程序处于脱机状态且无法获得更新的清单

第二是

Resource interpreted as Font but transferred with MIME type text/html: "https://mysite.com/fonts/fontawesome-webfont.ttf?v=4.1.0"

这是我能看到的唯一可能是原因.

任何见解都会很棒,提前谢谢!

Answer 1

要使此功能适用于我的项目,我必须将以下内容添加到appcache中.

CACHE:
#path to fa css
public/styles/fonts/FontAwesome.otf
public/styles/fonts/fontawesome-webfont.eot
public/styles/fonts/fontawesome-webfont.svg
public/styles/fonts/fontawesome-webfont.ttf
public/styles/fonts/fontawesome-webfont.woff

NETWORK:
*

FALLBACK:
/public/styles/fonts/fontawesome-webfont.woff public/styles/fonts/fontawesome-webfont.woff
/public/styles/fonts/fontawesome-webfont.eot public/styles/fonts/fontawesome-webfont.eot
/public/styles/fonts/fontawesome-webfont.svg public/styles/fonts/fontawesome-webfont.svg
/public/styles/fonts/fontawesome-webfont.ttf public/styles/fonts/fontawesome-webfont.ttf
/public/styles/fonts/FontAwesome.otf public/styles/fonts/FontAwesome.otf

即使它们被缓存,网络仍然会对图标发出请求.添加图标的回退捕获了请求并提供了缓存版本.