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

无页面自定义字体

禁止页面专用自定义字体。

此错误发生的原因

  • 您正在添加的自定义字体已添加到页面——这只会将字体添加到特定页面，而不是整个应用程序。
  • 您正在添加的自定义字体已添加到 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.ac.cn/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.ac.cn/css2?family=Inter&display=optional"
          rel="stylesheet"
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

何时不使用它

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