章节3

优化字体和图片

在上一章中，您学习了如何为您的 Next.js 应用程序设置样式。让我们继续处理您的主页，添加自定义字体和英雄图片。

在本节中…

以下是我们将介绍的主题

如何使用 next/font 添加自定义字体。

如何使用 next/image 添加图片。

字体和图片在 Next.js 中是如何优化的。

为什么要优化字体？

字体在网站的设计中起着重要的作用，但如果需要获取和加载字体文件，则在项目中使用自定义字体可能会影响性能。

累积布局偏移是 Google 用于评估网站性能和用户体验的指标。对于字体来说，布局偏移发生在浏览器最初使用备用字体或系统字体渲染文本，然后在加载自定义字体后将其替换出来时。这种替换会导致文本大小、间距或布局发生变化，从而导致周围元素发生偏移。

Mock UI showing initial load of a page, followed by a layout shift as the custom font loads.

当您使用 next/font 模块时，Next.js 会自动优化应用程序中的字体。它在构建时下载字体文件，并与其他静态资产一起托管它们。这意味着当用户访问您的应用程序时，不会有额外的字体网络请求，从而不会影响性能。

添加主字体

让我们将自定义 Google 字体添加到您的应用程序中，看看它是如何工作的！

在您的 /app/ui 文件夹中，创建一个名为 fonts.ts 的新文件。您将使用此文件来保存将在整个应用程序中使用的字体。

从 next/font/google 模块导入 Inter 字体 - 这将是您的主字体。然后，指定您要加载的子集。在本例中为 'latin'

/app/ui/fonts.ts

import { Inter } from 'next/font/google';
 
export const inter = Inter({ subsets: ['latin'] });

最后，将字体添加到 /app/layout.tsx 中的 <body> 元素中

/app/layout.tsx

import '@/app/ui/global.css';
import { inter } from '@/app/ui/fonts';
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={`${inter.className} antialiased`}>{children}</body>
    </html>
  );
}

通过将 Inter 添加到 <body> 元素，字体将应用于整个应用程序。在这里，您还添加了 Tailwind antialiased 类，该类可以使字体更平滑。使用此类不是必需的，但它会添加一个不错的效果。

导航到您的浏览器，打开开发者工具并选择 body 元素。您应该看到 Inter 和 Inter_Fallback 现在已应用在样式下。

练习：添加辅助字体

您还可以将字体添加到应用程序的特定元素中。

现在轮到您了！在您的 fonts.ts 文件中，导入一个名为 Lusitana 的辅助字体，并将其传递到 /app/page.tsx 文件中的 <p> 元素。除了像之前一样指定子集之外，您还需要指定字体的 **粗细**。

准备就绪后，展开下面的代码段以查看解决方案。

提示

如果您不确定要向字体传递哪些粗细选项，请查看代码编辑器中的 TypeScript 错误。

访问 Google Fonts 网站并搜索 Lusitana 以查看可用的选项。

请参阅有关添加多个字体和完整选项列表的文档。

最后，<AcmeLogo /> 组件也使用了 Lusitana。它被注释掉以防止错误，您现在可以取消注释它

/app/page.tsx

// ...
 
export default function Page() {
  return (
    <main className="flex min-h-screen flex-col p-6">
      <div className="flex h-20 shrink-0 items-end rounded-lg bg-blue-500 p-4 md:h-52">
        <AcmeLogo />
        {/* ... */}
      </div>
    </main>
  );
}

很好，您已将两个自定义字体添加到您的应用程序中！接下来，让我们将英雄图片添加到主页。

为什么要优化图片？

Next.js 可以服务于 **静态资产**，例如位于顶级 /public 文件夹下的图片。可以在您的应用程序中引用 /public 内的文件。

使用常规 HTML，您可以如下添加图片

<img
  src="/hero.png"
  alt="Screenshots of the dashboard project showing desktop version"
/>

但是，这意味着您必须手动

确保您的图片在不同屏幕尺寸下具有响应性。
为不同的设备指定图片大小。
防止图片加载时的布局偏移。
延迟加载位于用户视区之外的图片。

图片优化是 Web 开发中的一个重要主题，可以被认为是一个专门的领域。与其手动实现这些优化，您可以使用 next/image 组件来自动优化您的图片。

`<Image>` 组件

<Image> 组件是 HTML <img> 标签的扩展，并具有自动图片优化功能，例如

在图片加载时自动防止布局偏移。
调整图片大小以避免向具有较小视口的设备发送大型图片。
默认情况下延迟加载图片（图片在进入视区时加载）。
在浏览器支持的情况下，使用现代格式（如 WebP 和 AVIF）提供图片。

添加桌面英雄图片

让我们使用 <Image> 组件。如果您查看 /public 文件夹，您会看到有两个图片：hero-desktop.png 和 hero-mobile.png。这两个图片完全不同，它们将根据用户的设备是桌面还是移动设备显示。

在你的 /app/page.tsx 文件中，从 next/image 导入组件。然后，在注释下方添加图片

/app/page.tsx

import AcmeLogo from '@/app/ui/acme-logo';
import { ArrowRightIcon } from '@heroicons/react/24/outline';
import Link from 'next/link';
import { lusitana } from '@/app/ui/fonts';
import Image from 'next/image';
 
export default function Page() {
  return (
    // ...
    <div className="flex items-center justify-center p-6 md:w-3/5 md:px-28 md:py-12">
      {/* Add Hero Images Here */}
      <Image
        src="/hero-desktop.png"
        width={1000}
        height={760}
        className="hidden md:block"
        alt="Screenshots of the dashboard project showing desktop version"
      />
    </div>
    //...
  );
}

在这里，你将 width 设置为 1000，height 设置为 760 像素。最好设置图片的 width 和 height 以避免布局偏移，这些尺寸应该与源图片的纵横比完全一致。

你还会注意到 hidden 类用于在移动屏幕上从 DOM 中移除图片，以及 md:block 用于在桌面屏幕上显示图片。

现在你的主页应该看起来像这样

Styled home page with a custom font and hero image

练习：添加移动端英雄图片

现在轮到你了！在你刚刚添加的图片下方，再添加一个 <Image> 组件用于 hero-mobile.png。

图片的 width 应为 560，height 应为 620 像素。
它应该在移动屏幕上显示，在桌面屏幕上隐藏 - 你可以使用开发者工具检查桌面和移动图片是否正确交换。