在NextJS 13.4.x中加载字体时跳转

ewm0tg9j 于 2023-06-22 发布在其他

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

本地字体已加载，路径位于公用目录中。发展模式。禁用浏览器/网络中的缓存标志设置为相反。因此，当重新加载页面时，字体会跳转。也就是说，它被再次加载，并且它是显而易见的。优化崩溃。已回滚到下一个13.1.6，安装@next/font 13.1.6 experimental：{ appDir：true } -加载字体时不跳转。

*src/app/layout.tsx

import { FC, ReactElement } from 'react'

import { Metadata } from 'next'
import localFont from 'next/font/local'

import { mainTitle } from '@constants/staticData.consts'

import Footer from '@components/layouts/Footer'
import Header from '@components/layouts/Header'

import { IPropsWithChildren } from '@interfaces/common.types'

import '@styles/main.css'

export const metadata: Metadata = {
  title: mainTitle,
  description: 'Временное описание',
  icons: '/favicon.svg'
}

const moula = localFont({
  src: [
    {
      path: '../../public/assets/fonts/moula-regular.woff',
      weight: '400',
      style: 'normal'
    },
    {
      path: '../../public/assets/fonts/moula-regular.woff',
      weight: '400',
      style: 'normal'
    },
    {
      path: '../../public/assets/fonts/moula-semibold.woff2',
      weight: '600',
      style: 'normal'
    },
    {
      path: '../../public/assets/fonts/moula-semibold.woff',
      weight: '600',
      style: 'normal'
    },
    {
      path: '../../public/assets/fonts/moula-bold.woff',
      weight: '700',
      style: 'normal'
    },
    {
      path: '../../public/assets/fonts/moula-bold.woff',
      weight: '700',
      style: 'normal'
    }
  ],
  variable: '--font-moula'
})

const RootLayout: FC<IPropsWithChildren> = ({
  children
}): ReactElement => (
  <html lang='ru' className={ `${moula.variable}` }>
    <body className='font-moula text-large text-white bg-blue-960'>
      <Header />
      <main>{ children }</main>
      <Footer />
    </body>
  </html>
)

export default RootLayout

tailwind.config.js

// ... //
fontFamily: {
        moula: [ 'var(--font-moula)', ...fontFamily.sans ]
      },
// ... //

它看起来很像是一只虫子。我写了bug report

next.js

来源：https://stackoverflow.com/questions/76424788/jump-when-loading-fonts-in-nextjs-13-4-x

1条答案

按热度按时间

wqnecbli1#

我认为应该直接将moula.className添加到这段代码中，而不需要在tailwind.config.js中进行更改

const RootLayout: FC<IPropsWithChildren> = ({
  children
}): ReactElement => (
  <html lang='ru'>
  <body className={moula.className}>
      <Header />
      <main>{ children }</main>
      <Footer />
    </body>
  </html>
)

export default RootLayout

赞(0）回复(0）举报 2023-06-22

我来回答

在NextJS 13.4.x中加载字体时跳转

1条答案

相关问题

热门标签

最新问答