Playfair 显示字体看起来不同

Question

我在我的项目中使用谷歌字体的 Playfair Display 字体，但字体看起来与谷歌字体不同。我已经搜索过，但无法修复。我在我的项目中使用 Next JS 和 Tailwind。

这是我的代码

tailwind.config.ts

fontFamily: {
      'prompt':['Prompt', 'sans-serif'],
      'playfair': ['Playfair Display', 'serif'],
    }

封面.tsx

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

Answer 1

您需要在 global.css 页面中导入字体。我通常把它放在最顶部，所以你的 global.css 文件将如下所示：

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;

您可以通过单击谷歌字体页面上的“获取嵌入代码”，然后选择“@import”单选按钮来找到导入字符串。您还应该删除 fontFamily 名称周围的引号，因此在您的情况下，它应该如下所示：

fontFamily: {
  prompt:['Prompt', 'sans-serif'],
  playfair: ['Playfair Display', 'serif'],
}

做这些事情，它应该工作得很好。