如何在Next.js项目中设置font-weight（字体粗细）？

近期使用Next.js时，通过next/font导入Poppins字体后，设置font-weight遇到了问题，当前的实现代码如下：

// layout.jsx
import { Poppins } from "next/font/google";

const poppins = Poppins({
  weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
  subsets: ["latin"],
  display: "swap",
});

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={poppins.className}>
        {children}
      </body>
    </html>
  );
}

以下是几种解决方法：

• 确认字体资源加载状态：先检查浏览器Network面板，确认所有声明的权重对应的字体文件是否成功加载。同时在Elements面板查看body的类名，应该包含poppins前缀加权重的类（比如poppins-400），这说明Next.js已正确注册字体。
• 直接使用权重类名：next/font会为每个配置的权重生成独立类名，你可以直接给目标元素添加对应类名来指定粗细：

  // 示例：给h1设置700权重
  <h1 className={poppins.classes['700']}>加粗标题</h1>
  

• 用CSS变量实现灵活控制：修改字体配置添加variable字段，之后就能在CSS中自由设置font-weight：
  1. 更新字体配置：

  const poppins = Poppins({
    weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
    subsets: ["latin"],
    display: "swap",
    variable: '--font-poppins', // 添加变量声明
  });
  

  2. 在根元素上绑定变量：

  export default function RootLayout({ children }) {
    return (
      <html lang="en" className={poppins.className} style={{ fontFamily: 'var(--font-poppins)' }}>
        <body>{children}</body>
      </html>
    );
  }
  

  3. 在CSS中直接设置粗细：

  .heavy-text {
    font-weight: 800;
  }
  .light-text {
    font-weight: 200;
  }
  

• 排查样式冲突：如果以上方法无效，检查是否有其他CSS规则（比如全局样式、第三方组件库）覆盖了font-weight。打开浏览器开发者工具的Elements面板，查看元素的“Computed”样式，找到优先级更高的冲突规则并调整。

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