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

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

效果如下：

在这里插入图片描述

Google 字体 【默认】

本地字体

猜你喜欢

目录

热门文章

Google 字体【默认】