Next.js 独立开发教程（四）：字体与图像优化指南

原创

已于 2024-12-07 21:22:33 修改

· 1k 阅读

18 ·

版权

文章标签：

#javascript #开发语言 #ecmascript #前端 #前端框架

于 2024-11-23 09:21:47 首次发布

引言

在现代 Web 应用中，字体和图像的优化是影响用户体验和页面性能的关键因素。Next.js 提供了开箱即用的优化工具，使开发者能够轻松管理和提升字体与图像的加载性能。在这篇文章中，我们将基于 Next.js 的特性，详细介绍如何优化字体和图像，并应用到实际的仪表盘项目中。

1. 字体优化：提升文本呈现性能

1.1 Web 字体的加载挑战

传统的 Web 字体加载方式可能导致以下问题：

闪烁的无样式文本（FOIT）：在字体加载完成前，页面显示为空白或默认字体。
闪烁的样式化文本（FOUT）：加载完成后，页面的字体突然改变。

Next.js 提供了内置的字体优化功能，通过减少网络请求、提供延迟加载选项等方式优化字体加载性能。

1.2 使用 Next.js 内置的 Google 字体优化

Next.js 集成了 Google 字体服务，允许开发者直接使用优化后的字体加载。以下是应用 Google 字体的步骤。

步骤 1：安装必要的包

Next.js 内置的 Google 字体优化功能无需额外配置，但推荐通过以下方式快速使用：

npm install next/font

步骤 2：引入 Google 字体

以下是在 `pages/_app.js` 中引入字体的示例：

// pages/_app.js
import { Roboto } from 'next/font/google';

const roboto = Roboto({
  subsets: ['latin'],
  weight: ['400', '700'],
  style: ['normal', 'italic'],
  display: 'swap', // 避免 FOIT
});

export default function MyApp({ Component, pageProps }) {
  return (
    <div className={roboto.className}>
      <Component {...pageProps} />
    </div>
  );
}

步骤 3：配置字体选项

Next.js 的 Google 字体 API 支持多个选项：

weight：定义不同的字重（如 400、700）。

subsets：指定语言子集（如 `latin`、`cyrillic`）。

display：设置字体显示策略（推荐使用 `swap`）。

使用 `display: swap` 可以避免 FOIT，确保用户在字体加载时看到回退字体。

---

1.3 自定义字体的加载

如果项目中需要使用自定义字体（例如公司品牌字体），可以通过以下方式实现：
1. 将字体文件放置在 `public/fonts` 目录中。
2. 使用 CSS 或 CSS 模块加载字体。

以下是一个示例：

/* styles/globals.css */
@font-face {
  font-family: 'MyCustomFont';
  src: url('/fonts/MyCustomFont.woff2') format('woff2'),
       url('/fonts/MyCustomFont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: 'MyCustomFont', sans-serif;
}