优化字体

桌面端 82% 的网页 使用了网络字体。自定义字体对于您网站的品牌、设计以及跨浏览器/设备的一致性非常重要。然而，使用网络字体不应以牺牲性能为代价。

Next.js 内置了自动 Webfont 优化，它在构建时内联字体 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>