Next.js【详解】Font 字体方案

最新推荐文章于 2025-03-02 23:14:48 发布

朝阳39

最新推荐文章于 2025-03-02 23:14:48 发布

阅读量721

点赞数 7

分类专栏： Next.js 文章标签： Next.js

本文链接：https://blog.csdn.net/weixin_41192489/article/details/145625560

版权

Next.js 专栏收录该内容

6 篇文章

订阅专栏

Next.js 内置的 “next/font” 模块对字体进行了优化：

避免网络请求，提高了隐私性和性能
自托管的网页字体不会有布局偏移

传统的 Web 字体加载方式：网络请求字体文件，在字体加载完成前，页面显示为空白或默认字体，加载完成后，页面的字体突然改变，可能引发布局偏移

Google 字体【默认】

在创建项目时，便自动采用了 Google 字体，见 src\app\layout.tsx

import { Geist, Geist_Mono } from "next/font/google";

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});

      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >

本地字体

将本地字体文件放入 src\app 中，如 src\app\昆明海鸥体.ttf

百度云盘下载链接： https://pan.baidu.com/s/1rLFdlFoD5oTVNMUM6e4pOA?pwd=4526

将 src\app\layout.tsx 修改为

import type { Metadata } from "next";

import "./globals.css";

// 引入本地字体处理函数 localFont
import localFont from "next/font/local";

// localFont函数将本地字体文件转换为字体类名
const myFont = localFont({
  src: "./昆明海鸥体.ttf",
});

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      // body 上添加字体类名
      <body className={myFont.className}>{children}</body>
    </html>
  );
}