Next.js字体和CSS变量

l0oc07j2 于 2023-08-04 发布在其他

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

我正在尝试使用“下一个”添加字体的方式。然而，我觉得他们解释的方式似乎非常复杂，只是预加载一个字体。
我尝试导出一个创建字体的函数，然后使用变量标签创建一个css var。这不起作用，我已经将字体导入到page.js文件中。然后我导出了一个const函数，用这个变量创建字体;

import { Oxygen } from "next/font/google";

export const oxygen = Oxygen({
    display: 'swap',
    variable: '--font-oxygen',
    subsets: ['latin'],
})

字符串
然后尝试在链接CSS样式表中使用它将字体家族设置为确切的var using;

font-family: var(--font-oxygen);

型
我正在努力学习Nextjs，这只是让我失望。它不会工作，我不想设置我的html属性的类名字体类名，除非我做错了。

next.js

来源：https://stackoverflow.com/questions/76832162/next-js-fonts-and-css-vars

1条答案

按热度按时间

kxe2p93d1#

如果这是整个应用程序中使用的字体，则可以将字体导入index.js（使用Pages Router时）或app文件夹中的layout.js（使用App Router时）。你不必把它添加到你的CSS。
然后添加classname={oxygen.className}
对于页面示例;

import { Oxygen } from 'next/font/google'
 
const oxygen = Oxygen({ 
    display: 'swap',
    variable: '--font-oxygen',
    subsets: ['latin'],
})
 
export default function MyApp({ Component, pageProps }) {
  return (
    <main className={oxygen.className}>
      <Component {...pageProps} />
    </main>
  )
}

字符串

赞(0）回复(0）举报 2023-08-04

我来回答

Next.js字体和CSS变量

1条答案

相关问题

热门标签

最新问答