是否可以通过脱机存储缓存清单加载Webfonts？ [英] Is it possible to load webfonts through the offline storage cache manifest?

问题描述

我知道我可以通过html / css导入我的字体，但我想知道这是否是一种可实现的方法。

I understand that I can import my fonts through html/css but I am wondering if this is a achievable approach.

谢谢！

推荐答案

是的，如果您将字体添加到清单文件中，它们将与其余文件一起下载，然后可以脱机使用。 字体需要在离线应用所在的同一服务器上提供，因为您无法缓存不在您的域中的资源。例如，您无法缓存Google Web字体。我一直在对此进行一些测试，似乎来自Google的字体在Chrome和Opera上缓存，只有Firefox有问题。清单上的不在您的域名限制仅适用于通过HTTPS提供的服务。

Yes, if you add fonts to your manifest file they will be downloaded along with the rest of the files, and then be available offline. The fonts will need to be available from the same server where your offline app is, because you can't cache resources not on your domain. You couldn't cache a Google Web Font, for instance. I've been doing some testing on this, it seems fonts from Google are cached fine on Chrome and Opera, only Firefox has problems. The 'not on your domain' restriction for the manifest only applies when it's served over HTTPS.

您仍需要使用引用字体在您的CSS中使用@ font-face 规则，以便在您的页面中使用它们。例如，在您的清单文件中：

You will still need to reference the fonts with a @font-face rule in your CSS for them to be used in your page. For example, in your manifest file:

CACHE MANIFEST
# v1
index.html
style.css
GenBasR-webfont.eot
GenBasR-webfont.woff
GenBasR-webfont.ttf
GenBasR-webfont.svg

在style.css中：

In style.css:

@font-face {
    font-family: 'GentiumBasicRegular';
    src: url('GenBasR-webfont.eot');
    src: url('GenBasR-webfont.eot?iefix') format('eot'),
         url('GenBasR-webfont.woff') format('woff'),
         url('GenBasR-webfont.ttf') format('truetype'),
         url('GenBasR-webfont.svg#webfontLblSsz1O') format('svg');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'GentiumBasicRegular';
}

从 Font Squirrel 。

这篇关于是否可以通过脱机存储缓存清单加载Webfonts？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！