NextJS执行npm run export静态导出时如何正确引入字体文件

架构老林

2026-8-26

故障原因

本地开发字体加载正常、静态导出部署后失效，核心是@font-face配置的资源路径不符合Next.js静态导出的资源映射逻辑：

开发模式下Next.js内置服务会兼容../public/开头的相对路径引用，所以不会报错
执行npm run export导出静态包时，public目录下的所有文件会被直接复制到out目录根层级，不会保留public这层目录，你写的../public/fonts/xxx路径在构建后的CSS里会指向不存在的位置，自然加载失败。

修复方案

直接修改globals.css中所有@font-face规则的src路径，删掉../public前缀，统一用站点根路径开头的绝对地址，修改后代码：

@font-face {
  font-family: "Roboto Light";
  src: url('/fonts/Roboto-Light.ttf');
  font-display: swap;
}

@font-face {
  font-family: "Roboto Black";
  src: url('/fonts/Roboto-Black.ttf');
  font-display: swap;
}

@font-face {
  font-family: "Due Credit Regular";
  src: url('/fonts/Due-Credit-Regular.otf');
  font-display: swap;
}

@font-face {
  font-family: "Otamendi";
  src: url('/fonts/Otamendi.ttf');
  font-display: swap;
}

@font-face {
  font-family: "Compacta Regular";
  src: url('/fonts/Compacta-Regular.ttf');
  font-display: swap;
}