当前位置：文江博客话题详情

是否可以通过离线存储缓存清单加载网络字体？

发布于 2024-11-29 05:02:05 字数 63 浏览 0 评论 0原文

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

谢谢！

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

寻找我们的幸福 2024-12-06 05:02:05

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

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

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

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

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.

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

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';
}

Get the Gentium files from Font Squirrel.

回复收藏 0 原文

~没有更多了~