Next.js+Tailwind项目中Playfair Display字体显示异常求助

项目中使用Playfair Display字体的斜体样式时，显示效果与Google Fonts上的原字体存在差异——项目里的斜体衬线生硬，而原字体的斜体有自然的弧度，这是因为浏览器未加载到Playfair Display的原生斜体变体，自动 fallback到了默认衬线字体的斜体样式。以下是具体修复方案：

1. 用Next.js官方next/font/google加载字体（推荐方案） #

Next.js的next/font工具会自动优化字体加载，避免网络延迟或样式优先级问题，确保字体变体正确加载。

在根布局文件（app/layout.tsx 或 pages/_app.tsx）中添加以下代码：

import { Playfair_Display } from 'next/font/google';

// 加载Playfair Display的常规和斜体样式
const playfairDisplay = Playfair_Display({
  subsets: ['latin'],
  weight: ['400'], // 根据需求添加其他字重，比如500、700等
  style: ['normal', 'italic'], // 明确包含斜体样式
  variable: '--font-playfair', // 定义CSS变量供Tailwind使用
});

接着在根组件的HTML标签中注入字体变量：

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="zh-CN" className={`${playfairDisplay.variable}`}>
      <body>{children}</body>
    </html>
  );
}

2. 修正Tailwind配置文件 #

在tailwind.config.ts中，通过CSS变量引用加载好的字体：

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        playfair: ['var(--font-playfair)', 'serif'],
        prompt: ['Prompt', 'sans-serif'],
      },
    },
  },
  plugins: [],
};

3. 组件样式保持不变 #

你的cover.tsx代码无需修改，确保样式类名正确即可：

<div>
  <p className="font-normal text-[250px] mt-[-100px] ml-[300px]">PORT</p>
  <p className="font-playfair italic text-[230px] text-secondary">folio</p>
</div>

备选方案：传统<link>标签加载 #

如果不用next/font，直接在HTML中加载Google Fonts时，必须明确指定斜体变体：

<!-- 在根布局的<head>中添加 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;1,400&display=swap" rel="stylesheet">

（注：此方案需确保链接参数包含ital,wght@0,400;1,400，对应常规和斜体样式）

最后记得清除浏览器缓存，避免旧字体文件干扰显示。

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