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文件的外观。它似乎有正确的内容类型，并且那里没有奇怪的超级无法解决的东西。

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中遇到了相同的字体重新加载问题。事实证明，在指定local()字体之前，它与指定本地未安装的url()字体有关。

如果我使用以下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，因此我从local()的{{1}}代码中删除了@font-face字体引用。

src

这为我解决了。每个浏览器窗口上不再需要重新加载不需要的字体。

Answer 2

对此进行了尝试，但是使用FF进行了大量的自定义（特别是如果你正在运行插件）。

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

Answer 3

其他人已经建议FF：

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

Answer 4

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

Answer 5

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

Answer 6

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

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

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

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

6 个答案: