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