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

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

Answer 2

作为一种绕过离线缓存的方法，您可以在加载字体真棒css库后直接添加自定义样式，并删除它们。

＆＃13;

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
     
<style>
/*Temporary Fix for Font Awesome ApplicatonManifest offline Cache */
@font-face {
     font-family: 'FontAwesome';
     src: url('../fonts/fontawesome-webfont.eot');
     src: url('../fonts/fontawesome-webfont.eot') format('embedded-opentype'),       url('../fonts/fontawesome-webfont.woff2') format('woff2'), url('../fonts/fontawesome-webfont.woff') format('woff'), url('../fonts/fontawesome-webfont.ttf') format('truetype'), url('../fonts/fontawesome-webfont.svg') format('svg');
       font-weight: normal;
       font-style: normal;
}
</style>

＆＃13;

Answer 3

我遇到了这个问题，但是在oconn的回答中显示了正确的appcache配置 - 我只能通过删除css文件中文件名后面的版本来实现这一点：

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.6.3'); ...

在五个左右的地方附加到网址，将其更改为 -

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot'); ...

现在在Phonegap项目的字体 - 真棒常见问题解答部分的故障排除部分（虽然我没有使用Phonegap） - 这个问题在github issue 3632中引用了fontawesome。

Webfont（字体很棒）目前无法正常工作

3 个答案: