Webfont (font awesome) Not Working Corrently Offline

Refresh

December 2018

Views

6.1k time

6

I've been having issues getting webfonts (font awesome to be specific) displaying properly whilst my app is offline.

so I have my font in the manifest

fonts/fontawesome-webfont.ttf?v4.1.0

When the app first loads online, the ttf file loads and gets stored in the appcache and displays correctly.

however, as soon as you disconnect the network so the app runs offline, all works fine apart from the font based icons (they display as square boxes as if the font hasn't loaded)

I've looked in chrome's appcache (chrome://appcache-internals) and the file is there

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

I can access the file and the header seems correct

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

There are a couple of suspect things in chrome.

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

But this I assume is simply because the app is offline and cannot get an updated manifest

The second is

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

This is the only thing that I can see that might be the cause.

Any insight would be amazing, thanks in advance!

3 answers

12

Чтобы получить эту функцию для работы над проектом я должен был добавить следующее к 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

Сеть по-прежнему делает запрос на значки, даже если они были в кэш. Добавление запасного варианта для значков пойман запрос и служил в кэше версии.

1

Я испытал это, но был правильный конфиг AppCache показано в ответ oconn в - я только был в состоянии получить эту работу, удалив версию после того, как имя файла в файле CSS:

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

в пяти или около того места, где оно добавляется к URL, изменяя его к этому -

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

Это сейчас в разделе Поиск и устранение неисправностей fontawesome FAQ для проектов PhoneGap (я не использую PhoneGap, хотя) - и вопрос цитируется в GitHub выпуске 3632 для fontawesome.

2

Как способ обойти это для автономного кэша вы можете добавить свой стиль непосредственно после загрузки шрифтов огромной библиотеки CSS с ними удален.

<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>