Firefox Developer v130.0b5中Nunito Sans字体权重显示异常求助

问题背景 #

在Firefox Developer Browser v130.0b5（64位）环境下，使用Nunito Sans字体时，设置的不同font-weight值无法正确渲染，控制台仅输出以下警告：

Layout was forced before the page was fully loaded. If stylesheets are not yet loaded this may cause a flash of unstyled content. markup.js:250:53

当前使用的核心代码如下：

CSS 代码 #

body{
  font-family: "Nunito Sans", sans-serif;
  color: #545454;
}
p{
  font-weight: 700;
}
span{
  font-weight: 500;
}

HTML 代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="[Google Fonts生成的Nunito Sans字体链接]" rel="stylesheet">
  <style></style>
</head>
<body>
  <h1>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h1>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span>
</body>
</html>

显示效果截图：

解决方案（无需更换字体） #

1. 强制绑定字体族与字重 #

部分浏览器对继承的字体族解析存在匹配偏差，为每个需要自定义字重的元素显式声明字体族，确保浏览器匹配对应字重的字体文件：

body{
  font-family: "Nunito Sans", sans-serif;
  color: #545454;
}
p{
  font-family: "Nunito Sans", sans-serif;
  font-weight: 700;
}
span{
  font-family: "Nunito Sans", sans-serif;
  font-weight: 500;
}

2. 优化字体加载时机，避免布局提前触发 #

控制台警告提示布局在资源加载完成前已触发，这会导致浏览器先用替代字体渲染，后续无法正确切换为目标字体。可通过以下方式优化：

• 修改字体链接的加载策略，确保字体加载完成后再渲染页面内容：

  <link href="[Google Fonts生成的Nunito Sans字体链接]" rel="stylesheet" media="print" onload="this.media='all'">
  

• 使用preload预加载对应字重的字体文件，文件地址可从Google Fonts生成的样式表中提取对应字重的woff2文件路径。

3. 调整Firefox字体渲染配置 #

打开Firefox的about:config页面，检查并调整以下配置：

• 确认gfx.font_rendering.fontconfig.fontlist.enabled设为true，确保浏览器正常读取系统字体列表；
• 临时关闭layout.css.font-weight-adjust.enabled（设为false），该特性可能干扰自定义字重的渲染，测试问题是否解决。

4. 显式声明@font-face规则 #

直接从Google Fonts生成的样式表中提取对应字重的@font-face规则，写入本地CSS，避免外部样式表解析延迟导致的匹配错误：

@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url([对应500字重的woff2文件地址]) format('woff2');
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url([对应700字重的woff2文件地址]) format('woff2');
}

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