Next.js生产构建与开发构建Montserrat字体显示不一致问题求助

AI 小北

2026-9-26

你当前的字体引入方式存在顺序错误，这是生产构建失效的核心原因：

CSS规范要求@import规则必须放在所有其他样式规则之前才能生效。你把Google字体的引入语句放在了三条@tailwind指令之后，开发环境下CSS预处理器的宽松校验可以兼容这种写法，但是生产构建时会对样式做严格的压缩与规则校验，后置的@import会被直接忽略，导致Montserrat字体没有被加载，页面自动降级为默认的系统无衬线字体。

两种修复方案如下：

方案1：调整样式顺序（最快修复）

修改globals.scss的代码顺序，把字体引入放在最顶部：

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

html,
body {
  padding: 0;
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  background-color:  hsl(265, 3%, 53%);
  color: black;
  &:before{
    content:'';
    content: "";
    width: 100%;
    height: 100vh;
  }
}

方案2：使用Next.js内置字体方案（更稳定，推荐）

Next.js自带next/font能力，原生支持Google字体加载，不需要额外引入外部CSS，不会出现生产构建失效问题，还能避免字体闪烁、提升加载性能：

在根布局文件（App Router对应app/layout.js，Pages Router对应pages/_app.js）中引入字体：

import { Montserrat } from 'next/font/google'

const montserrat = Montserrat({
  weight: ['300', '400', '700'],
  subsets: ['latin'],
  display: 'swap',
})

将字体类绑定到根节点：

// App Router 写法示例
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={montserrat.className}>{children}</body>
    </html>
  )
}