在 Next.js 中使用 Google Fonts

0. 前言

Next.js 12.2 中引入了一个较新功能，这允许开发者通过一个简洁的 API 直接从 Google Fonts 引入字体。通过 next/font 模块提供支持。这种方法的好处是可以简化字体的引入和使用过程，同时还能享受到 Next.js 的性能优化。

1. 建立字体管理文件

在 app/ui 下建立文件 fonts.ts

引入 google fonts

import { Inter } from 'next/font/google'

导出字体变量

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

2. 在项目中引入

给 /app/layout.tsx 中的 <body> 元素中添加字体

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>
  );
}

3. Google Font 的一些配置项

配置项	类型	描述	示例
`weight`	`string` 或 `string[]`	指定要加载的字重。	`'400'`, `['400', '700']`
`style`	`string`	指定字体的样式，如常规或斜体。	`'normal'`, `'italic'`
`display`	`string`	设置字体的加载和显示行为，如何处理字体加载前的显示。	`'swap'`, `'fallback'`, `'optional'`
`subsets`	`string[]`	指定要加载的字符集子集。	`['latin', 'cyrillic']`
`effects`	`string[]`	（可选）指定要应用的特殊视觉效果。	`['open-shadow']`
`variable`	`boolean`	指定是否加载变量版的字体。	`true`, `false`

4. 扩展阅读

字体优化文档

本文由小但创作
全文共：1866个字
采用知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载，均为作者原创，转载前请务必署名
最后编辑时间为: May 12, 2024 at 04:30 pm