字体优化

默认情况下，Blitz.js 将在构建时自动内联字体 CSS，从而消除额外的往返来获取字体声明。这改进了第一次内容绘制 (FCP) 和最大内容绘制 (LCP)。

例如：

// 之前
<link
  href="https://fonts.googleapis.com/css2?family=Inter"
  rel="stylesheet"
/>

// 此后
<style data-href="https://fonts.googleapis.com/css2?family=Inter">
  @font-face{font-family:'Inter';font-style:normal...
</style>

用法

要向 Blitz.js 应用添加 Web 字体，请使用 <Head>。你可以将字体添加到特定页面，如下所示：

// pages/index.js

import { Head } from "blitz"

export default function IndexPage() {
  return (
    <div>
      <Head>
        <link
          href="https://fonts.googleapis.com/css2?family=Inter"
          rel="stylesheet"
        />
      </Head>
      <p>Hello world!</p>
    </div>
  )
}

或使用自定义 Document 到你的整个应用。

// pages/_document.js

import { Document, Html, DocumentHead, Main, BlitzScript } from "blitz"

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <DocumentHead>
          <link
            href="https://fonts.googleapis.com/css2?family=Inter"
            rel="stylesheet"
          />
        </DocumentHead>
        <body>
          <Main />
          <BlitzScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

自动 Web 字体优化（Automatic Webfont Optimization）目前支持 Google Fonts 和 Typekit，即将支持其他字体提供商。我们还计划添加对加载策略和 font-display 值的控制。

关闭优化

如果你不想让 Blitz.js 优化你的字体，你可以选择关闭。

// blitz.config.js

module.exports = {
  optimizeFonts: false,
}

Topics

用法

关闭优化