Pingdom测速时同时下载同字体的woff2与woff文件问题咨询

这事儿我之前也碰到过——Pingdom的测试服务器看起来会把@font-face里声明的woff2和woff格式都下载一遍，但真实用户的浏览器其实不会这么干。咱们一步步来捋清楚怎么处理：

1. 确保@font-face声明的格式优先级正确 #

你现在的代码其实已经把woff2放在前面了，这是对的！现代浏览器（Chrome、Firefox、Edge、Safari 10+）都支持woff2，它们会优先加载第一个兼容的格式，直接跳过后面的woff。不过可以再加个小优化，提升用户体验：

@font-face {
  font-family:'Roboto Condensed';
  src:url('../fonts/roboto-condensed-v16-latin-regular.woff2') format('woff2'),
      url('../fonts/roboto-condensed-v16-latin-regular.woff') format('woff');
  font-weight:400;
  font-style:normal;
  /* 避免页面加载时的字体闪烁（FOIT），让浏览器先显示 fallback 字体 */
  font-display: swap;
}

font-display: swap 能让用户更快看到内容，不会因为字体加载慢而出现空白，这是个很实用的性能细节。

2. 区分测试工具和真实用户的行为 #

Pingdom这类测试工具的爬虫/测试引擎，有时候为了全面检测资源，会把所有声明的资源都拉取一遍，但真实用户的浏览器是严格按照支持性来选择的：

• 95%以上的现代浏览器只会加载woff2（压缩率更高，加载更快）
• 只有旧版IE（比如IE11）这类不支持woff2的浏览器，才会加载woff格式

你可以自己用Chrome/Firefox的开发者工具打开Network面板，刷新页面看看，实际只会加载woff2格式，完全不用担心重复加载的问题。

3. 可选：首屏字体预加载优化 #

如果这个Roboto Condensed是首屏必须显示的字体，可以在HTML头部添加预加载声明，让浏览器更早开始加载字体，进一步提升首屏速度：

<link rel="preload" href="../fonts/roboto-condensed-v16-latin-regular.woff2" as="font" type="font/woff2" crossorigin>

注意必须加crossorigin属性，哪怕字体是同域托管的——浏览器对字体资源的加载会按跨域规则处理，不加这个的话预加载可能无效。

总结 #

Pingdom的测试结果只是工具的检测逻辑导致的“假重复”，真实用户不会遇到这个问题。按照上面的调整，既能保证字体加载的性能最优，又能提升用户体验。

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