我有一个使用 Bootstrap 和 SASS 的 rails 应用程序，并且我使用 google 字体。
我在我的 css 文件中加载我的字体：
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800);
但是当我在 Safari 中检查网络请求时，它总是说我的字体没有从缓存中加载。
我已经尝试将 WebFonts 添加到我的应用程序中，希望它会为我缓存字体，但没有奏效。
有人知道如何正确缓存字体吗？
提前致谢
【问题讨论】：
标签： css ruby-on-rails caching google-font-api
字体应该缓存，谷歌字体也应该缓存。也可以看看; https://developers.google.com/fonts/faq#Performance:
如果页面使用网络字体，则必须将字体文件下载到 网站访问者的计算机，然后才能最初显示。 字体文件被压缩以加快下载速度。在那之后 初始下载，它们将被缓存在浏览器中。作为谷歌 字体 API 被广泛使用，您的访问者可能已经 当他们访问您的浏览器时，将您正在使用的字体保存在他们的浏览器缓存中 页面
您应该注意到 SASS 将 @import url() 编译为完全正确的 @import url()，因此您的 sass 代码会生成“正常”css import。
以上还清楚地表明您的问题与 Sass 无关（或与 Rails 无关）。
CSS @imports 和 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 标头的 HTTP 请求（请参阅：What's the difference between Cache-Control: max-age=0 and no-cache?），Google 不会使用 Not Modified 标头响应。
fonts.gstatic.com 的字体文件应该被缓存。
如果您的问题是来自 fonts.googleapis.com 的 CSS 代码没有缓存，那么您是对的。但你也应该想知道这是否是一个真正的问题。另一方面，当您的问题是来自fonts.gstatic.com 的字体文件没有缓存时，我希望您的浏览器设置会阻止缓存。
当你想禁用无法缓存的对fonts.googleapis.com的HTTP请求时，你不应该使用@import，而是直接在你的Sass代码中声明@font-face。 （您可以通过在浏览器中打开 https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,80 来找到这些声明）。请注意，当字体文件在fonts.gstatic.com 上的位置发生更改时，上述内容将中断字体文件的下载。 Google 还可以使用来自fonts.googleapis.com 的 CSS 代码将用户指向最快的位置（例如基于位置）以下载字体文件（当尚未缓存时）。
【讨论】：