跳到内容
文档错误无页面自定义字体

无页面自定义字体

防止页面专用的自定义字体。

为什么会出现此错误

  • 你添加的自定义字体是添加到页面中的 - 这只会将字体添加到特定页面，而不是整个应用程序。
  • 你添加的自定义字体是添加到 pages/_document.js 中的单独组件 - 这会禁用自动字体优化。

可能的修复方法

创建文件 ./pages/_document.js 并将字体添加到自定义 Document

pages/_document.js
import Document, { Html, Head, Main, NextScript } from 'next/document'
 
class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <link
            href="https://fonts.googleapis.com/css2?family=Inter&display=optional"
            rel="stylesheet"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}
 
export default MyDocument

或作为函数组件

pages/_document.js
import { Html, Head, Main, NextScript } from 'next/document'
 
export default function Document() {
  return (
    <Html>
      <Head>
        <link
          href="https://fonts.googleapis.com/css2?family=Inter&display=optional"
          rel="stylesheet"
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

何时不使用它

如果你有理由仅为特定页面加载字体，或者不关心字体优化，则可以禁用此规则。