Blitz 尚在 beat 阶段! 🎉 预计会在今年的 Q3 季度发布 1.0
Back to Documentation Menu

字体优化

Topics

Jump to a Topic

默认情况下,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,
}

Idea for improving this page? Edit it on GitHub.