编辑“︁Next.js字体优化”︁（章节）

= Next.js字体优化 =

== 介绍 ==
'''Next.js字体优化'''是指通过技术手段提升网页字体加载性能的方法，旨在减少[[内容布局偏移]](CLS)、提高[[首屏渲染速度]]并优化用户体验。Next.js 13+ 内置了`next/font`模块，支持自动字体托管、子集化、[[CSS尺寸调整]]等高级功能，无需额外配置即可实现最佳实践。

== 核心优化策略 ==

=== 1. 使用`next/font`模块 ===
Next.js提供的专用字体工具会自动：
* 托管字体文件（支持Google Fonts和本地字体）
* 生成[[WOFF2]]等高效格式
* 内联关键CSS
* 预加载资源

<syntaxhighlight lang="javascript">
// 示例：使用Google Fonts
import { Inter } from 'next/font/google';

const inter = Inter({ subsets: ['latin'] });

export default function Page() {
  return (
    <div className={inter.className}>
      Optimized font loading!
    </div>
  );
}
</syntaxhighlight>

输出效果：
* 字体文件从`/_next/static/media`加载
* 自动添加`<link rel="preload">`
* 生成[[字体显示]]策略：`font-display: swap`

=== 2. 字体子集化 ===
通过`subsets`参数仅加载所需字符集：

<syntaxhighlight lang="javascript">
const notoSans = Noto_Sans_JP({
  subsets: ['japanese', 'latin'],
  weight: ['400', '700'],
});
</syntaxhighlight>

对比效果：
{| class="wikitable"
|-
! 配置方式 || 文件大小
|-
| 全字符集 || 5.2MB 
|-
| 日文子集 || 132KB
|}

=== 3. 可变字体优化 ===
使用`variable`模式减少HTTP请求：

<syntaxhighlight lang="javascript">
const roboto = Roboto({
  weight: '400 700', // 范围语法
  style: 'normal italic',
  variable: '--font-roboto',
});
</syntaxhighlight>

CSS变量应用：
<syntaxhighlight lang="css">
:root {
  font-weight: 400;
  font-style: normal;
}

.emphasis {
  font-weight: 700;
  font-style: italic;
}
</syntaxhighlight>

== 性能影响分析 ==
使用mermaid展示字体加载流程：

<mermaid>
sequenceDiagram
    participant Browser
    participant CDN
    Browser->>CDN: 请求HTML
    CDN-->>Browser: 返回含内联CSS的HTML
    Browser->>CDN: 预加载字体(Priority: High)
    CDN-->>Browser: 返回WOFF2文件
    Browser->>Browser: 应用字体(FOUT/FOIT策略)
</mermaid>

关键指标对比（测试环境：Lighthouse 10.0）：
* '''未优化'''：CLS 0.45 | LCP 2.8s
* '''优化后'''：CLS 0 | LCP 1.2s

== 高级配置 ==

=== 自定义本地字体 ===
<syntaxhighlight lang="javascript">
import localFont from 'next/font/local';

const myFont = localFont({
  src: [
    {
      path: './fonts/MyFont-Regular.woff2',
      weight: '400',
      style: 'normal',
    },
    {
      path: './fonts/MyFont-Bold.woff2',
      weight: '700',
      style: 'bold',
    },
  ],
});
</syntaxhighlight>

=== 强制预加载 ===
在`_document.js`中添加：

<syntaxhighlight lang="javascript">
<Head>
  <link
    rel="preload"
    href="/_next/static/media/MyFont-Regular.woff2"
    as="font"
    type="font/woff2"
    crossOrigin="anonymous"
  />
</Head>
</syntaxhighlight>

== 实际案例 ==
'''电商网站Header优化'''：
1. 原方案：直接引入Google Fonts CSS
   * 问题：触发额外DNS查询 + 渲染阻塞
2. 优化后：
   * 使用`next/font`的Inter字体
   * 仅加载`latin`子集
   * 结果：首屏加载时间减少40%

== 数学原理 ==
字体加载性能可通过[[网络空闲时间]]模型计算：

<math>
T_{font} = T_{DNS} + T_{TCP} + T_{TTFB} + \frac{S_{font}}{B}
</math>

其中：
* <math>S_{font}</math> = 字体文件大小
* <math>B</math> = 可用带宽

== 常见问题 ==

'''Q: 如何解决字体闪烁问题？'''
A: 通过`display: swap`配置（Next.js默认启用）：

<syntaxhighlight lang="javascript">
const font = Inter({ display: 'swap' });
</syntaxhighlight>

'''Q: 多语言站点如何优化？'''
A: 动态加载字体子集：

<syntaxhighlight lang="javascript">
// 根据路由切换子集
const subsets = router.locale === 'ja' ? ['japanese'] : ['latin'];
</syntaxhighlight>

== 最佳实践总结 ==
# 始终使用`next/font`模块
# 对非拉丁字体启用子集化
# 优先选择可变字体
# 监控[[核心网页指标]]变化
# 对关键文本使用`preload`

通过实施这些优化，可使字体加载对[[LCP]]的影响降低60-80%，同时保持视觉稳定性。

[[Category:后端框架]]
[[Category:Next.js]]
[[Category:Next.js SEO与性能优化]]