CSS 样式表中的 Next.js 字体

问题描述 投票：0回答：1
我正在使用 NextJS（版本 14.2.13）开始一个新项目。我使用以下代码从谷歌字体导入了两种字体：

./app/fonts.ts



import { Montserrat, Open_Sans } from 'next/font/google'

export const montserrat = Montserrat({
    subsets: ['latin'],
    variable: '--font-montserrat',
    display: 'swap',
});

export const open_sans = Open_Sans({
    subsets: ['latin'],
    variable: '--font-open-sans',
    display: 'swap',
});

当将字体应用于元素时，一切正常：


.app/page.tsx


import {montserrat} from "./fonts";


export default function Home() {
  return (
      <>
          <h1 className={`${montserrat.className}`}>Hello World</h1>
      </>
  );
}

但是，由于我的应用程序变得非常大，我想应用全局样式。我怎样才能做这样的事情：


.app/globals.css


h1 {
  font-family: "open-sans";
}

h6 {
  font-family: "montserrat";
}

并将我使用 Next.js 导入的字体分别全局应用于所有 h1 和 h6 元素？

    

	


css

next.js

tailwind-css


1个回答




    
    
    

        

            

                

                    
0
投票

                    
                

            

        

        
您已经在字体中指定了变量名称。您只需将变量类添加到
app/layout.ts
:


// add this to <body>:

<body className={`${montserrat.variable} ${open_sans.variable}`}>
   ...
</body>

然后在 CSS 文件中使用该变量：


h1 {
  font-family: var(--font-open-sans);
}

h6 {
  font-family: var(--font-montserrat);
}

文档：
https://nextjs.org/docs/app/api-reference/components/font#css-variables
    

	

    

    


  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.