css - Rails 谷歌字体缓存

Question

我有一个使用 Bootstrap 和 SASS 的 Rails 应用程序，我使用谷歌字体。

我在我的 css 文件中加载我的字体:

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800);

但是当我在 Safari 中检查网络请求时，它总是说我的字体没有从缓存中加载。

我已经尝试将 WebFonts 添加到我的应用程序中，希望它能为我缓存字体，但没有成功。

有人知道如何正确缓存字体吗？

提前致谢

Answer 1

字体应该缓存，谷歌字体也应该缓存。也可以看看; https://developers.google.com/fonts/faq#Performance :

If a page uses web fonts, then the font files have to be downloaded to the site visitor's computer before they can be displayed initially. The font files are served compressed for a faster download. After that initial download, they will be cached in the browser. As the Google Fonts API becomes widely used, your visitors will be likely to already have the font you're using in their browser cache when they visit your page

你应该注意到 SASS 编译 @import url()正好是@import url()所以你的 sass 代码导致“正常” css import .以上也清楚地表明您的问题与 Sass 无关(或与 Rails 无关)。

CSS @import与 url()使用 HTTP 请求将 CSS 代码从外部源加载到您的 CSS 代码中。

所以在你的情况下https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,80不包含您的字体，但此 URI 仅返回一些 CSS 代码。此 CSS 代码包含 @font-face字体声明。

Google 阻止了对 fonts.googleapis.com 的请求从缓存。 @font-face这些结果中的声明还包含 url()请求指向字体文件。例如:src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v10/DXI1ORHCpsQm3Vp6mXoaTegdm0LZdjqr5-oayXSOefg.woff2) format('woff2'), url(https://fonts.gstatic.com/s/opensans/v10/DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff) format('woff');

(@import 创建一个带有 max-age=0 header 的 HTTP 请求(请参阅:What's the difference between Cache-Control: max-age=0 and no-cache? )并且 Google 不会使用 Not Modified header 进行响应。

字体文件来自fonts.gstatic.com应该被缓存。

如果您的问题与来自 fonts.googleapis.com 的 CSS 代码有关不是缓存，那么你是对的。但你也应该怀疑这是否是一个真正的问题。另一方面，当您的问题与来自 fonts.gstatic.com 的字体文件有关时没有缓存那么我希望你的浏览器设置阻止缓存。

当您想禁用对 fonts.googleapis.com 的 HTTP 请求时不能被缓存，你不应该使用 @import , 但直接把 @font-face Sass 代码中的声明。 (您可以通过在浏览器中打开 https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,80 找到这些声明)。请注意，当字体文件位于 fonts.gstatic.com 时，上述内容将中断字体文件的下载。改变。 Google 还可以使用 fonts.googleapis.com 中的 CSS 代码吗？将用户指向最快的位置(例如基于位置)以下载字体文件(如果尚未缓存)。