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

== 核心优化策略 ==

=== 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>