字体优化
82% 的桌面端网页 使用网络字体。自定义字体对于品牌形象、设计以及跨浏览器/设备的显示一致性至关重要。然而,使用网络字体不应以牺牲性能为代价。
Next.js 内置了 自动字体优化 功能,可在构建时内联字体 CSS,省去了额外获取字体声明的网络请求。这能显著改善首次内容绘制 (FCP) 和最大内容绘制 (LCP) 指标。
以下是 Next.js 优化字体前后的对比示例:
优化前需要额外的网络请求:
优化后 Next.js 会自动内联字体 CSS:
82% 的桌面端网页 使用网络字体。自定义字体对于品牌形象、设计以及跨浏览器/设备的显示一致性至关重要。然而,使用网络字体不应以牺牲性能为代价。
Next.js 内置了 自动字体优化 功能,可在构建时内联字体 CSS,省去了额外获取字体声明的网络请求。这能显著改善首次内容绘制 (FCP) 和最大内容绘制 (LCP) 指标。
以下是 Next.js 优化字体前后的对比示例:
优化前需要额外的网络请求:
优化后 Next.js 会自动内联字体 CSS: