优化字体

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

Next.js 内置了自动网络字体优化，它在构建时内联字体 CSS，消除了额外的往返请求以获取字体声明。这可以改善首次内容绘制 (FCP) 和最大内容绘制 (LCP)。

例如，以下是 Next.js 优化字体前后的对比。

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

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

优化后，Next.js 为您内联字体 CSS

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