css - 为什么 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，并且其中没有奇怪的 super 取消缓存的东西。

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 中删除了 local() 字体引用的 src 标签。

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

这对我来说已经解决了。每次调整浏览器窗口大小时，不再需要重新加载不需要的字体。