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

页面自定义字体

阻止仅页面自定义字体。

错误发生的原因

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

可能的解决方法

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

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>
  )
}

何时不使用它

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