当我的应用处于离线状态时,我一直无法正确显示 webfonts(具体来说是很棒的字体)。
所以我在 list 中有我的字体
fonts/fontawesome-webfont.ttf?v4.1.0
当应用首次在线加载时,ttf 文件会加载并存储在应用缓存中并正确显示。
但是,只要您断开网络连接,应用程序就可以离线运行,除了基于字体的图标(它们显示为方框,就好像字体没有加载一样)之外,一切都很好
我查看了 chrome 的应用程序缓存 (chrome://appcache-internals),文件就在那里
Explicit, https://mysite.com/fonts/fontawesome-webfont.ttf?v4.1.0 141 kB
我可以访问该文件并且 header 看起来是正确的
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
但我认为这仅仅是因为应用程序处于离线状态并且无法获取更新的 list
第二个是
Resource interpreted as Font but transferred with MIME type text/html: "https://mysite.com/fonts/fontawesome-webfont.ttf?v=4.1.0"
这是我能看到的唯一可能的原因。
任何见解都会很棒,提前致谢!
最佳答案
为了让这个功能在我的项目中发挥作用,我必须将以下内容添加到应用缓存中。
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
即使图标已被缓存,网络仍在发出对图标的请求。添加图标的回退捕获请求并提供缓存版本。
关于html - Webfont( Font Awesome )不能正常离线工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24055244/