为什么在调整页面大小时 Firefox 会重新请求字体？

Question

我有一个相当简单的 Bootstrap3 站点，在 CSS 中嵌入了一些自定义字体，带有 @font-face 规则。它工作得很好。这些页面是由 Django 生成的，所以当我测试它时，我还可以看到浏览器发出的本地请求。

当我调整浏览器窗口大小时，我看到数百个字体请求：

127.0.0.1 - - [04/Dec/2014 13:42:59] "GET /static/fonts/Source_Sans_Pro_400italic.woff HTTP/1.1" 200 -
127.0.0.1 - - [04/Dec/2014 13:42:59] "GET /static/fonts/Source_Sans_Pro_400.woff HTTP/1.1" 200 -
127.0.0.1 - - [04/Dec/2014 13:42:59] "GET /static/fonts/Source_Sans_Pro_700.woff HTTP/1.1" 200 -
127.0.0.1 - - [04/Dec/2014 13:42:59] "GET /static/fonts/Source_Sans_Pro_400italic.woff HTTP/1.1" 200 -
127.0.0.1 - - [04/Dec/2014 13:42:59] "GET /static/fonts/Source_Sans_Pro_400.woff HTTP/1.1" 200 -
127.0.0.1 - - [04/Dec/2014 13:42:59] "GET /static/fonts/Source_Sans_Pro_700.woff HTTP/1.1" 200 -
127.0.0.1 - - [04/Dec/2014 13:42:59] "GET /static/fonts/Source_Sans_Pro_400italic.woff HTTP/1.1" 200 -
127.0.0.1 - - [04/Dec/2014 13:42:59] "GET /static/fonts/Source_Sans_Pro_400.woff HTTP/1.1" 200 -
127.0.0.1 - - [04/Dec/2014 13:42:59] "GET /static/fonts/Source_Sans_Pro_700.woff HTTP/1.1" 200 -
127.0.0.1 - - [04/Dec/2014 13:42:59] "GET /static/fonts/Source_Sans_Pro_400italic.woff HTTP/1.1" 

全部用于相同的自定义字体。一遍又一遍，直到我停止调整大小。

我知道大多数人不会经常调整浏览器的大小，但为什么 Firefox 会这样做呢？我可以阻止它吗？

Chrome 不会出现这种行为。

这是使用curl 时文件的外观。它似乎有正确的 Content-Type 并且其中没有奇怪的超级未缓存的东西。

HTTP/1.0 200 OK
Last-Modified: Sun, 30 Nov 2014 22:53:43 GMT
Content-Length: 65452
Content-Type: application/x-font-woff
Server: Werkzeug/0.9.4 Python/2.7.4
Date: Thu, 04 Dec 2014 14:13:57 GMT

Answer 1

在每次调整浏览器窗口大小时，我都在 Firefox 中遇到了同样的字体重新加载问题。事实证明，在指定 url() 字体之前，它与指定未在本地安装的 local() 字体有关。

如果我使用以下 css：

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url("../fonts/Roboto-Regular.woff2") format('woff2'), url("../fonts/Roboto-Regular.ttf") format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

如果我没有在本地安装 Roboto-Regular，则该行为会出现在 Firefox 中，如果我在本地安装 Roboto-Regular，问题就会消失。由于我不希望每个人都在本地安装 Roboto-Regular，因此我从 @font-face 的 src 标记中删除了 local() 字体引用。

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/Roboto-Regular.woff2") format('woff2'), url("../fonts/Roboto-Regular.ttf") format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

这为我解决了问题。每次调整浏览器窗口大小时，不再需要重新加载不需要的字体。

Answer 2

博文Woff and Caching* 建议当使用错误/未知的MIME 类型时，字体不会被缓存并在每次需要时再次请求。但是在文章中他们没有使用正确的类型，因为当时还没有标准化。

这篇文章相当旧，从 2010 年开始，可能不再相关，但使用正确的 MIME 类型肯定不会受到伤害。 correct MIME type for WOFF 是 application/font-woff。

_{* 最初由 Bes 发布，但被 ♦ 删除。虽然没有解释为什么在调整大小时必须再次请求字体，但我认为考虑缓存问题仍然会有所帮助。}

Answer 3

对此进行尝试，但 FF 带来了大量的自定义（尤其是如果您正在运行插件）。

1. 您是否通过本地浏览器通过插件/插件运行任何页面 CSS 覆盖
2. 您的 FF 安装是否有可用的版本更新？
3. 问题是否出现在 SBX/testing 中，或者它是否也出现在另一台计算机上？在进行浏览器测试时，我更喜欢在多台机器（和设备类型）上进行测试，以隔离本地配置问题。
4. 您是否通过了任何试金石/页面渲染测试？

Answer 4

某些字体在某些尺寸下效果不佳，因此当您增加或减小字体大小时，Firefox 会将字体更改为非常相似的字体。您可以通过浏览所有字体并缓慢更改字体大小来测试这一点。有些字体彼此非常接近，您可能甚至不会注意到差异，但请仔细观察。

Answer 5

与 Chrome (Blink) 相比，Firefox 使用不同的渲染引擎 (Gecko)，这可以解释不同的渲染行为。然而，由于没有关于这个主题的明确信息或文档，因此无法给出具体答案。最好的办法是把它交给 Mozilla，同时看看你是否可以使用 @font-face 的替代品，如果它妨碍你的工作。

Answer 6

其他人建议 FF 这样做：

<FilesMatch "\.(ttf|otf|woff)$">
<IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>