为什么Nextjs 14显示按钮与next/font和tailwind不同？

Question

我正在尝试升级到 nextjs 14，但坚持如何使用 next/font。我有两个具有完全顺风类的按钮，只是最后一个中的 nextjs 字体类名不同

这是我的代码

import type { Metadata } from "next";
import { Lato } from "next/font/google";
import "./globals.css";

const LatoFont = Lato({
  subsets: ["latin"],
  weight: "400",
});

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body
        style={{ backgroundColor: "rgba (244, 241, 255, 1)" }}
        className={` ${LatoFont.className}`}
      >
        {/* {children} */}
        <button
          className={`bg-red-600 hover:bg-red-700 text-white font-semibold py-2 px-4 rounded-lg w-1/2 mr-2 ${LatoFont.className}`}
        >
          Google
        </button>
        <button
          className={`bg-red-600 hover:bg-red-700 text-white font-semibold py-2 px-4 rounded-lg w-1/2 mr-2`}
        >
          Google
        </button>
      </body>
    </html>
  );
}

这是结果

我检查了一下，发现这两个按钮里面的font-family是一模一样的？并且只有第二个按钮显示为粗体。为什么他们的显示不同？有什么想法吗？

Answer 1

在 Next.js 中，当您使用字体时，您可能需要包含多个字体粗细，例如常规 (400) 和 (600)。您可以像这样修改代码以包含常规和半粗体权重，以丰富两个按钮的相同结果

const LatoFont = Lato({
  subsets: ['latin'],
  weight: '400,600', // Add '400' for regular and '600' for semibold
});

您可以参考 https://tailwindcss.com/docs/font-weight 了解有关 font-weight 值的信息，以在使用 Tailwind CSS 时实现相同的行为。

所以它看起来像：

import type { Metadata } from "next";
import { Lato } from "next/font/google";
import "./globals.css";

const LatoFont = Lato({
  subsets: ["latin"],
  weight: "400,600",
});

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body
        style={{ backgroundColor: "rgba (244, 241, 255, 1)" }}
        className={` ${LatoFont.className}`}
      >
        {/* {children} */}
        <button
          className={`bg-red-600 hover:bg-red-700 text-white font-semibold py-2 px-4 rounded-lg w-1/2 mr-2 ${LatoFont.className}`}
        >
          Google
        </button>
        <button
          className={`bg-red-600 hover:bg-red-700 text-white font-semibold py-2 px-4 rounded-lg w-1/2 mr-2`}
        >
          Google
        </button>
      </body>
    </html>
  );
}

为什么Nextjs 14显示按钮与next/font和tailwind不同？

问题描述投票：0回答：1

1个回答

最新问题

为什么Nextjs 14显示按钮与next/font和tailwind不同？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1