我第一次使用create-next-app创建了一个新的Next.js项目，并且我已经成功地使用npm run dev运行了它。
问题是每次Next.js启动时，它都会说：

FetchError: request to https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2 failed, reason: 
    at ClientRequest.<anonymous> (C:\Users\user\Desktop\documents\node_modules\next\dist\compiled\node-fetch\index.js:1:65756)
    at ClientRequest.emit (node:events:511:28)
    at TLSSocket.socketErrorListener (node:_http_client:495:9)
    at TLSSocket.emit (node:events:511:28)
    at emitErrorNT (node:internal/streams/destroy:151:8)
    at emitErrorCloseNT (node:internal/streams/destroy:116:3)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
  type: 'system',
  errno: 'ENETUNREACH',
  code: 'ENETUNREACH'
}
- error Failed to download `Inter` from Google Fonts. Using fallback font instead.

我的目标是让Next.js使用实际字体而不是后备字体。
我不知道为什么会发生这种情况，因为我还没有在Next.js中更改任何内容。即使在我的浏览器中打开URL https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2也能很好地工作，所以我想这不是一个网络问题。
我试着在Next.js文档中搜索，没有找到任何重复的文档。
下面是位于src/app/内部的layout.tsx：

import './globals.css'
import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

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

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

此外，我正在运行Node版本20.3.0和npm版本9.4.1，并使用Next.js 13.4。基本上是写这个问题的时候最晚的。

import './globals.css' import { Inter } from 'next/font/google' const inter = Inter({ subsets: ['latin'], display: 'swap', adjustFontFallback: false}) export const metadata = { title: 'Create Next App', description: 'Generated by create next app', } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( <html lang="en"> <body className={inter.className}>{children}</body> </html> ) }

1条答案

按热度按时间

wrrgggsh1#

尝试不同的浏览器和清除该高速缓存也没有帮助。我通过添加key display: 'swap'来解决这个问题，其中value swap的意思是：
为字体提供极小的块周期和无限的交换周期。
其中字体“block”句点表示：
如果未加载字体，则尝试使用它的任何元素都必须呈现不可见的备用字体。如果字体在此期间成功加载，则正常使用。
而font“swap”period的意思是：
如果未加载字体，任何试图使用它的元素都必须呈现回退字体。如果字体在此期间成功加载，则正常使用。
这就是我一直在寻找的。
我还添加了key adjustFontFallback: false，这意味着：
一个布尔值，设置是否应使用自动回退字体来减少Cumulative Layout Shift。默认值为true。
下面是我的最后一个layout.tsx：

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

Next.js从Google Fonts下载字体时总是失败

1条答案

相关问题

热门标签

最新问答