Firefox为何显示字体预加载警告？求排查方案

我已经查阅相关问题帖并尝试多种方案，但在Windows 10的Firefox及Firefox开发者版中仍收到字体预加载警告，Edge和Chrome则无此问题。

警告内容为每个字体变体在约10秒后触发：

通过link preload预加载的资源未在数秒内使用，请确保preload标签属性设置正确

我在测试网页上自托管Google字体Roboto，相关信息如下：

文件夹结构 #

test/
 index.html
 roboto.css
 roboto-light-webfont.woff
 roboto-light-webfont.woff2
 roboto-regular-webfont.woff2
 roboto-regular-webfont.woff
 roboto-medium-webfont.woff2
 roboto-medium-webfont.woff

HTML代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <link
      rel="preload"
      href="roboto-light-webfont.woff2"
      as="font"
      type="font/woff2"
      crossorigin="anonymous"
    />
    <link
      rel="preload"
      href="roboto-regular-webfont.woff2"
      as="font"
      type="font/woff2"
      crossorigin="anonymous"
    />
    <link
      rel="preload"
      href="roboto-medium-webfont.woff2"
      as="font"
      type="font/woff2"
      crossorigin="anonymous"
    />
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Roboto</title>
    <link rel="stylesheet" href="roboto.css" />
  </head>
  <body>
    <h1>Roboto (medium: 500)</h1>
    <ul>
      <li>Roboto (regular: 400)</li>
    </ul>
    <p>Roboto (light: 300)</p>
  </body>
</html>

CSS代码 #

@font-face {
    font-family: "Roboto";
    font-weight: 300;
    src: url("roboto-light-webfont.woff2") format("woff2"), url("roboto-light-webfont.woff") format("woff");
}
/** Regular: 400 **/
@font-face {
    font-family: "Roboto";
    font-weight: 400;
    src: url("roboto-regular-webfont.woff2") format("woff2"), url("roboto-regular-webfont.woff") format("woff");
}
/** Medium: 500 **/
@font-face {
    font-family: "Roboto";
    font-weight: 500;
    src: url("roboto-medium-webfont.woff2") format("woff2"), url("roboto-medium-webfont.woff") format("woff");
}

h1 {
    font-family: "Roboto", serif;
    font-weight: 500;
}

li {
    font-family: "Roboto", serif;
    font-weight: 400;
}

p {
    font-family: "Roboto", serif;
    font-weight: 300;
}

已尝试的方案 #

曾尝试在每个preload后添加link rel="stylesheet"的方案，但仍出现相同警告：

<link
  rel="preload"
  href="roboto-light-webfont.woff2"
  as="font"
  type="font/woff2"
  crossorigin="anonymous"
/>
<link
  rel="stylesheet"
  href="roboto-light-webfont.woff2"
  type="font/woff2"
/>
<link
  rel="preload"
  href="roboto-regular-webfont.woff2"
  as="font"
  type="font/woff2"
  crossorigin="anonymous"
/>
<link
  rel="stylesheet"
  href="roboto-regular-webfont.woff2"
  type="font/woff2"
/>
<link
  rel="preload"
  href="roboto-medium-webfont.woff2"
  as="font"
  type="font/woff2"
  crossorigin="anonymous"
/>
<link
  rel="stylesheet"
  href="roboto-medium-webfont.woff2"
  type="font/woff2"
/>

请问我的字体预加载方式存在什么问题？

问题根源 #

Firefox对预加载资源的匹配逻辑比Chrome/Edge更严格：

1. 跨域属性不匹配：你的自托管字体是同域资源，但crossorigin="anonymous"会让Firefox将其当作跨域资源处理，而CSS中加载同域字体时默认不带跨域标识，导致预加载资源和实际请求的资源无法匹配，Firefox判定预加载资源未被使用。
2. 标签顺序问题：预加载标签放在meta和CSS链接之前，Firefox解析CSS时，预加载资源还未完成匹配关联，延迟触发警告。
3. 无效的stylesheet标签：字体不是CSS资源，添加rel="stylesheet"链接字体的方式完全错误，会导致浏览器解析异常，反而加重问题。

修正步骤 #

1. 移除预加载标签的crossorigin="anonymous"属性：同域字体不需要跨域标识，去掉后Firefox能正确关联预加载资源和CSS中请求的字体。
2. 调整预加载标签位置：将预加载标签放在CSS链接之后，确保CSS解析时预加载资源已处于待匹配状态。
3. 删除所有无效的rel="stylesheet"字体链接：这类标签完全不符合资源类型规范，必须移除。

修正后的HTML代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Roboto</title>
    <link rel="stylesheet" href="roboto.css" />
    <!-- 预加载标签移至CSS之后，移除crossorigin属性 -->
    <link
      rel="preload"
      href="roboto-light-webfont.woff2"
      as="font"
      type="font/woff2"
    />
    <link
      rel="preload"
      href="roboto-regular-webfont.woff2"
      as="font"
      type="font/woff2"
    />
    <link
      rel="preload"
      href="roboto-medium-webfont.woff2"
      as="font"
      type="font/woff2"
    />
  </head>
  <body>
    <h1>Roboto (medium: 500)</h1>
    <ul>
      <li>Roboto (regular: 400)</li>
    </ul>
    <p>Roboto (light: 300)</p>
  </body>
</html>

额外说明 #

如果后续需要加载跨域字体，需同时满足两个条件：

• 预加载标签保留crossorigin="anonymous"
• CSS的@font-face规则中添加crossorigin: anonymous属性，示例：

  @font-face {
      font-family: "Roboto";
      font-weight: 300;
      src: url("跨域字体URL") format("woff2");
      crossorigin: anonymous;
  }
  

内容的提问来源于stack exchange，提问作者Naj