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

Posted 2023-03-06

【中文标题】为啥在调整页面大小时 Firefox 会重新请求字体？

【英文标题】：Why does Firefox re-request fonts when the page is resized?为什么在调整页面大小时 Firefox 会重新请求字体？

【发布时间】：2015-02-02 10:18:19

【问题描述】：

我有一个相当简单的 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

【问题讨论】：

给我们一个示例页面来测试，我注意到类似的问题只存在于某些带有一些插件的浏览器上（在下一个浏览器版本之后修复），可能它只存在于您的浏览器中或只存在于某些插件中。

我第二个 ViliusL。我有一个网站有字体规则，但在 Firefox 中没有表现出这种行为

您的font-face 规则是什么？它们在媒体查询中吗？

我尝试了firebug 和wireshark。我的 Firefox 没有表现出这种行为。给我们一个页面来测试。可能是其他东西正在发送这些请求。即使发送了多个请求，您也可以使用正确的.htaccess 设置发送304 not modified

【参考方案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;

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

【讨论】：

谢谢！也为我工作。我认为这是正确的答案。

【参考方案2】：

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

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

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

【参考方案3】：

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

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

【讨论】：

欢迎来到该网站 - 无需以签名结束您的问题和答案，因为它只会影响内容本身。不过，可以将其包含在您的用户简历中。

谢谢@BoltClock，没意识到！ - 干杯！

【参考方案4】：

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

【参考方案5】：

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

【参考方案6】：

其他人建议 FF 这样做：

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

【讨论】：

是的，我将所有内容都托管在同一个域中。

啊好吧，那不是！