字体预加载时Chrome与Firefox控制台报错的解决办法咨询

我来帮你搞定这些字体预加载的控制台错误——虽然字体已经正常显示，但这些报错确实是可以修复的，咱们一步步来排查和解决：

一、先处理type属性的错误（场景1） #

你在场景1里给TTF字体设置的type="font/truetype"不是标准支持的MIME类型，这直接导致了Chrome和Firefox的不支持的type值错误。如果想要保留type属性，需要改成正确的MIME类型：

<link rel="preload" href="/fonts/open-sans-v26-latin-regular.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/fonts/RobotoCondensed-Regular.ttf" as="font" type="font/ttf" crossorigin>

不过其实字体预加载的type属性是可选的，像你场景2那样移除它也完全没问题，真正的核心问题是预加载资源未被及时识别为“已使用”。

二、解决“预加载资源未被使用”的核心错误 #

浏览器抛出这个错误，本质是它预加载了字体文件，但在规定时间内没检测到页面从同一个URL加载并使用该字体，咱们从这几个关键点排查：

1. 确保@font-face的URL和预加载URL完全一致 #

检查你CSS里的@font-face规则，src里的URL必须和preload标签的href完全匹配——包括路径、大小写（Linux服务器大小写敏感）、是否带查询参数等。比如：

@font-face {
  font-family: 'Open Sans';
  src: url('/fonts/open-sans-v26-latin-regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Roboto Condensed';
  src: url('/fonts/RobotoCondensed-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

哪怕URL差一个斜杠、大小写不同，浏览器都会认为是两个不同的资源，预加载的资源就会被判定为“未使用”。

2. 让@font-face的CSS尽早加载 #

如果包含@font-face的CSS是异步加载、或者放在页面底部，浏览器预加载字体后，过了很久才读到CSS里的字体引用，就会触发报错。解决方法：

• 把包含@font-face的CSS用同步<link>标签放在<head>里，不要加async/defer属性；
• 更稳妥的方式是直接把@font-face规则内联在<head>的<style>标签里，让浏览器一加载页面就能识别到字体引用。

3. 确保页面中有元素实际使用该字体 #

哪怕你定义了@font-face，如果页面上没有任何元素设置font-family为这个字体，浏览器会觉得预加载的资源没用，从而报错。检查你的CSS，确保有元素使用这些字体：

/* 比如给body设置默认字体 */
body {
  font-family: 'Open Sans', sans-serif;
}

/* 或者给特定类设置 */
.heading {
  font-family: 'Roboto Condensed', sans-serif;
}

4. 确认crossorigin属性设置正确 #

字体资源哪怕是同域的，浏览器也要求添加crossorigin属性（这是浏览器的安全机制），你已经加了这个属性，这步是对的。如果是跨域CDN加载的字体，可以改成crossorigin="anonymous"，同域的话只写crossorigin就足够。

总结 #

按上面的步骤调整后，浏览器就能正确识别预加载的字体资源，控制台的错误就会消失啦。

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