Next.js部署后字体大小发生变化与本地运行显示效果不一致

安全阿岳

2026-10-5

可能的原因及对应解决方案

样式加载顺序差异
本地dev模式和生产构建后的CSS加载顺序不同，是这类问题最常见的诱因。Next.js生产构建会自动压缩合并样式，可能导致你自定义的字体规则被优先级更高的默认样式覆盖。可以先给你写的字体样式规则加!important临时验证是否是优先级问题，如果验证有效，后续可以调整样式引入顺序，在_app.js/_app.tsx文件最顶部优先引入全局字体样式即可。
字体加载闪烁问题
本地开发时网络环境好，字体文件几乎瞬间加载完成，部署到远端服务器后，字体加载存在延迟，会先渲染系统fallback字体，之后再替换为自定义字体，导致视觉上大小差异。如果你的项目是Next.js 13及以上版本，直接用内置的next/font方案托管字体即可，它会自动内联字体样式，保证服务端和客户端渲染一致性，不会出现加载闪烁：
示例配置：
1. 新建app/fonts.ts文件定义字体
```
import { Inter } from 'next/font/google'
export const inter = Inter({ subsets: ['latin'] })
```
1. 在根布局文件中引入字体，挂载到body节点即可
浏览器默认样式差异
如果本地测试和部署后打开用的不是同一款浏览器，不同浏览器的默认字体、默认字号规则有差异也会导致显示不一致。可以引入normalize.css统一不同浏览器的默认样式，也可以手动在全局样式里添加基础重置规则：
```
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  font-size: 100%;
}
```
构建配置异常
检查你的next.config.js和postcss.config.js配置，看是否有生产环境才生效的样式处理插件（比如cssnano）配置错误，导致生产构建时字体相关样式被错误修改。
快速定位方法
打开部署后页面的开发者工具，选中字体大小异常的元素，对比本地开发环境下同一元素的CSS规则列表，看是否有缺失的样式，或者多了优先级更高的覆盖规则，就能直接定位具体问题。