在 Next.js 项目中全局使用特定的 Google 字体，仅适用于默认/路由

Question

我想为我的 Next.js 项目制作“Roboto”全局字体。这是我的主要布局文件，我试图根据文档进行制作。

import type { Metadata } from "next";
import { Roboto } from "next/font/google";

import "./globals.scss";

const roboto = Roboto({
  weight: "400",
  subsets: ["latin"],
  variable: "--font-roboto",
  display: "swap",
});

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

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={roboto.className}>{children}</body>
    </html>
  );
}

这是我的 global.scss 文件

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--font-roboto);
}

我也有这个用于登录路由的组件（src/pages/login/index.tsx）

const Login = () => {
    return <button>Random button</button>
};

export default Login;

当我添加这一行时：

import '../../app/globals.css';

一切正常。但我不想在每个文件中导入 global.css 文件。我只想在主 leyout 文件中导入一次，仅此而已。

Answer 1

我尝试了同样的事情，它对我有用。我只在布局中导入 globals.scss，并且我在 const Roboto 中所做的每个更改都更改了所有其他组件。我的代码：

//layout.tsx
import type { Metadata } from "next";
import { Roboto } from "next/font/google";

import "./globals.scss";

const roboto = Roboto({
  weight: "700",
  style: "italic",
  subsets: ["latin"],
  variable: "--font-roboto",
  display: "swap",
});

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

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={roboto.className}>{children}</body>
    </html>
  );
}

//page.tsx
import Login from "./_components/login";
import Test from "./_components/test";

const Home = () => {
  return (
    <div>
      <Test />
      <Login />
    </div>
  );
};

export default Home;

//test.tsx
const Test = () => {
  return (
    <>
      <div>hello</div>
      <div>world</div>
    </>
  );
};

export default Test;

//login.tsx
const Login = () => {
  return <button>Random button</button>;
};

export default Login;

//globals.scss
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--font-roboto);
}

//globals.scss after changing margin

* {
  margin: 100px;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--font-roboto);
}

在 Next.js 项目中全局使用特定的 Google 字体，仅适用于默认/路由

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

1个回答

最新问题

在 Next.js 项目中全局使用特定的 Google 字体，仅适用于默认/路由

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

1个回答

最新问题

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