在每个页面上应用字体- NextJS

pgccezyw 于 2023-11-18 发布在其他

关注(0)|答案(1)|浏览(80)

我有一个nextjs应用程序，我在我的app/layout.tsx上应用了Google字体：
问题：此字体仅适用于/，而不适用于其他页面。layout.tsx是否适用于所有子页面？

import "styles/global.css";
import {Metadata} from "next";
import {Gabarito} from "next/font/google";

const gabarito = Gabarito({
    weight: ["500", "600", "700", "900"],
    style: ["normal"],
    display: "swap",
    subsets: ["latin"],
});

export default function RootLayout({children}: {children: React.ReactNode}) {
    return (
        <html lang='fr' className={gabarito.className}>
            <body>{children}</body>
        </html>
    );
}

export const metadata: Metadata = {
    title: "...",
    description: "...",
};

字符串

next.js

来源：https://stackoverflow.com/questions/77439363/apply-font-on-every-pages-nextjs

1条答案

按热度按时间

fsi0uk1n1#

问题：

此字体仅应用于/，而不应用于其他页面。layout.tsx是否适用于所有子页面

可能原因：

Tailwind CSS配置不正确。
在tailwind.config.js内容键中缺少'./pages/**/*.{js,ts,jsx,tsx,mdx}'此行。
解决方案：

根据官方文件，
转到您的tailwind.config.js并添加更新content密钥到

content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}', // Note the addition of the `app` directory.
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
 
    // Or if using `src` directory:
    './src/**/*.{js,ts,jsx,tsx,mdx}',
  ],

字符串
另外，在您的app/globals.css不要忘记添加：

@tailwind base;
@tailwind components;
@tailwind utilities;

型

tailwind.config.js：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [

    './app/**/*.{js,ts,jsx,tsx,mdx}', // Note the addition of the `app` directory.
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',

    // Or if using `src` directory:
    './src/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {

    },
  },
  plugins: [],
}

型

请阅读：*
***配置Tailwind：**https：nextjs.org/docs/app/building-your-application/styling/tailwind-css#configuring-tailwind
如果您还有任何疑问，请留下评论（我会更新答案）。*

赞(0）回复(0）举报 2023-11-18

我来回答

在每个页面上应用字体- NextJS

1条答案

相关问题

热门标签

最新问答