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

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

4. 扩展阅读

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

← → ↓ ↑
留言：