字体优化

82% 的桌面端网页 使用网络字体。自定义字体对于品牌形象、设计以及跨浏览器/设备的显示一致性至关重要。然而,使用网络字体不应以牺牲性能为代价。

Next.js 内置了 自动字体优化 功能,可在构建时内联字体 CSS,省去了额外获取字体声明的网络请求。这能显著改善首次内容绘制 (FCP) 和最大内容绘制 (LCP) 指标。

以下是 Next.js 优化字体前后的对比示例:

优化前需要额外的网络请求:

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

优化后 Next.js 会自动内联字体 CSS:

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