Next.js字体优化 #

一、next/font概述 #

1.1 什么是next/font #

next/font 是 Next.js 内置的字体优化系统：

自动优化字体
自动托管 Google Fonts
内联字体 CSS
零布局偏移

1.2 支持的字体 #

类型	函数	说明
Google Fonts	next/font/google	自动托管
本地字体	next/font/local	自定义字体

二、Google Fonts #

2.1 基本用法 #

tsx

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

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

export default function RootLayout({
    children,
}: {
    children: React.ReactNode
}) {
    return (
        <html lang="zh-CN">
            <body className={inter.className}>{children}</body>
        </html>
    )
}

2.2 指定字重 #

tsx

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

const inter = Inter({
    subsets: ['latin'],
    weight: ['400', '500', '700'],
})

2.3 指定样式 #

tsx

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

const roboto = Roboto({
    subsets: ['latin'],
    weight: ['400', '700'],
    style: ['normal', 'italic'],
})

2.4 使用CSS变量 #

tsx

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

const inter = Inter({
    subsets: ['latin'],
    variable: '--font-inter',
})

export default function RootLayout({ children }: { children: React.ReactNode }) {
    return (
        <html lang="zh-CN" className={inter.variable}>
            <body>{children}</body>
        </html>
    )
}

CSS中使用：

css

body {
    font-family: var(--font-inter), sans-serif;
}

2.5 多字体 #

tsx

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

const inter = Inter({
    subsets: ['latin'],
    variable: '--font-inter',
})

const playfair = Playfair_Display({
    subsets: ['latin'],
    variable: '--font-playfair',
})

export default function RootLayout({ children }: { children: React.ReactNode }) {
    return (
        <html lang="zh-CN" className={`${inter.variable} ${playfair.variable}`}>
            <body className={inter.className}>{children}</body>
        </html>
    )
}

三、本地字体 #

3.1 基本用法 #

tsx

import localFont from 'next/font/local'

const myFont = localFont({
    src: './fonts/MyFont.woff2',
})

export default function Page() {
    return <div className={myFont.className}>自定义字体</div>
}

3.2 多字重 #

tsx

import localFont from 'next/font/local'

const myFont = localFont({
    src: [
        {
            path: './fonts/MyFont-Regular.woff2',
            weight: '400',
            style: 'normal',
        },
        {
            path: './fonts/MyFont-Bold.woff2',
            weight: '700',
            style: 'normal',
        },
    ],
})

3.3 使用CSS变量 #

tsx

import localFont from 'next/font/local'

const myFont = localFont({
    src: './fonts/MyFont.woff2',
    variable: '--font-my-font',
})

四、字体配置 #

4.1 subsets #

tsx

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

const inter = Inter({
    subsets: ['latin', 'latin-ext'],
})

4.2 display #

tsx

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

const inter = Inter({
    subsets: ['latin'],
    display: 'swap',
})

值	说明
auto	默认
block	阻塞渲染
swap	先显示后备字体
fallback	短暂阻塞后切换
optional	仅在缓存时使用

4.3 preload #

tsx

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

const inter = Inter({
    subsets: ['latin'],
    preload: true,
})

4.4 adjustFontFallback #

tsx

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

const inter = Inter({
    subsets: ['latin'],
    adjustFontFallback: true,
})

五、Tailwind CSS集成 #

5.1 CSS变量方式 #

tsx

import { Inter } from 'next/font/google'
import './globals.css'

const inter = Inter({
    subsets: ['latin'],
    variable: '--font-inter',
})

export default function RootLayout({ children }: { children: React.ReactNode }) {
    return (
        <html lang="zh-CN" className={inter.variable}>
            <body>{children}</body>
        </html>
    )
}

css

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
    font-family: var(--font-inter), sans-serif;
}

5.2 Tailwind配置 #

typescript

import type { Config } from 'tailwindcss'

const config: Config = {
    content: ['./src/**/*.{js,ts,jsx,tsx}'],
    theme: {
        extend: {
            fontFamily: {
                sans: ['var(--font-inter)', 'sans-serif'],
            },
        },
    },
    plugins: [],
}

export default config

六、最佳实践 #

6.1 布局中使用 #

tsx

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

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

export default function RootLayout({ children }: { children: React.ReactNode }) {
    return (
        <html lang="zh-CN">
            <body className={inter.className}>{children}</body>
        </html>
    )
}

6.2 减少字体数量 #

tsx

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

const inter = Inter({
    subsets: ['latin'],
    weight: ['400', '700'],
})

6.3 使用display: swap #

tsx

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

const inter = Inter({
    subsets: ['latin'],
    display: 'swap',
})

七、总结 #

字体优化要点：

要点	说明
Google Fonts	next/font/google
本地字体	next/font/local
CSS变量	variable属性
字重选择	weight属性
显示策略	display属性

下一步，让我们学习脚本优化！