nextjs next/font 的使用

Next.js 是一款基于 React 的 SSR 框架，它具有非常方便的自动静态优化（Automatic Static Optimization）和准即时构建和热加载（Instantaneous Builds and Hot Reloads）功能，使得使用 Next.js 可以更快速、更轻松地开发 React 应用。

next/font 是 Next.js 的一个字体库模块，它提供了一种简便的方式来添加 Google Fonts 和自定义字体。在使用 next/font 前，需要先引入并安装 fontsource 组件库。安装命令如下：

npm install --save @fontsource/{font-family-name}

或者使用 Yarn：

yarn add @fontsource/{font-family-name}

其中，{font-family-name} 替换成你需要使用的字体。以 Montserrat 为例，

npm install --save @fontsource/montserrat

或者使用 Yarn：

yarn add @fontsource/montserrat

安装完 fontsource 后，就可以在 Next.js 项目中使用 next/font 了。下面是一个使用 next/font 设置全局字体样式的例子：

首先，在 pages/_app.js 文件中引入 next/font 和需要使用的字体：

import { GoogleFonts } from 'next-fonts';
import { Montserrat } from '@fontsource/montserrat'; // 引入 Montserrat 字体
import '../styles/global.css';

function MyApp({ Component, pageProps }) {
  return (
    <>
      <GoogleFonts href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" />
      <Montserrat />
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;

可以看到，在这个例子中，我们先使用 GoogleFonts 组件引入了 Montserrat 字体库，然后又在 MyApp 组件中引入了 Montserrat 字体。

接着，在 styles/global.css 文件中定义全局的字体样式：

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

现在，整个应用程序的字体就被设置为 Montserrat 字体了。

需要注意的是，如果使用了 Google Fonts，因为浏览器缓存的缘故，新添加的字体可能会被浏览器缓存而无法直接生效。可以通过强制浏览器重新加载页面来解决这个问题。