在 Next.js 中使用 Google Fonts
in 其他折腾日记 with 0 comment

在 Next.js 中使用 Google Fonts

in 其他折腾日记 with 0 comment

在 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 的一些配置项

配置项类型描述示例
weightstringstring[]指定要加载的字重。'400', ['400', '700']
stylestring指定字体的样式,如常规或斜体。'normal', 'italic'
displaystring设置字体的加载和显示行为,如何处理字体加载前的显示。'swap', 'fallback', 'optional'
subsetsstring[]指定要加载的字符集子集。['latin', 'cyrillic']
effectsstring[](可选)指定要应用的特殊视觉效果。['open-shadow']
variableboolean指定是否加载变量版的字体。true, false

4. 扩展阅读

留言: