next/font จะเพิ่มประสิทธิภาพแบบอักษรอย่างไร

Question

Accepted Answer

`next/font` จะปรับปรุงแบบอักษรเว็บโดยอัตโนมัติเพื่อปรับปรุงประสิทธิภาพและขจัดการเปลี่ยนแปลงการจัดวาง — โดยจัดเก็บแบบอักษรเองในเวลาการสร้างและจัดการรายละเอียดการโหลดให้คุณ ## การใช้แบบอักษร Google ```tsx // app/layout.tsx import { Inter } from "next/font/google"; const inter = Inter({ subsets: ["latin"], // only load the character sets you need (smaller files) display: "swap", // show fallback text immediately, swap when font loads }); export default function RootLayout({ children }) { return ( {/* apply the font */} {children} ); } ``` ## มันทำอะไรโดยอัตโนมัติ - **จัดเก็บเอง** — ในเวลาการสร้าง Next จะดาวน์โหลดแบบอักษร Google และให้บริการจาก **โดเมนของคุณ** ไม่มีคำขอไปยังเซิร์ฟเวอร์ Google ในเวลาทำงาน → เร็วกว่าและดีกว่าสำหรับความเป็นส่วนตัว (ไม่มีการติดตามของบุคคลที่สาม) - **การเปลี่ยนแปลงการจัดวางเป็นศูนย์** — มันคำนวณเมตริกแบบอักษรสำรองให้ตรงกับแบบอักษรเว็บ ดังนั้นเมื่อแบบอักษรจริงสลับเข้ามา ข้อความจะไม่กระโดด (ป้องกัน CLS) - **โปรแกรมโหลดล่วงหน้าและการสับเซต** — โหลดแบบอักษรล่วงหน้าและรวมเฉพาะชุดอักขระที่ระบุไว้ ลดการดาวน์โหลด - **ไม่มีคำขอที่บล็อก Render** — แบบอักษรเป็นส่วนหนึ่งของการสร้างของคุณ ไม่ใช่การดึงภายนอกที่มีการบล็อก ## แบบอักษรในเครื่อง ```tsx import localFont from "next/font/local"; const myFont = localFont({ src: "./MyFont.woff2", display: "swap" }); ``` ## เหตุใดการปรับปรุงแบบอักษรจึงมีความสำคัญ แบบอักษรเป็นปัญหาประสิทธิภาพและ CLS แบบคลาสสิก: การดึงของบุคคลที่สามที่บล็อกการแสดงผลข้อความ จากนั้นก่อให้เกิดการเปลี่ยนแปลงการจัดวางเมื่อแบบอักษรโหลด (FOUT/FOIT) การทำให้สำเร็จได้ดีด้วยตนเองต้องใช้ `@font-face`, `font-display`, โปรแกรมโหลดล่วงหน้า และการจับคู่เมตริกสำรอง ## เหตุใดสิ่งนี้จึงมีความสำคัญ `next/font` จะทำให้รายการตรวจสอบประสิทธิภาพแบบอักษรทั้งหมดเป็นอัตโนมัติ — จัดเก็บเอง (ความเร็ว + ความเป็นส่วนตัว) การสับเซตและการโหลดล่วงหน้า (เล็กกว่า เร็วกว่า) และการจับคู่เมตริกสำรอง (ไม่มีการเปลี่ยนแปลงการจัดวาง) — หลังจากการนำเข้าครั้งเดียว มันช่วยลบการปรับปรุงที่ยุ่งยากและเสี่ยงต่อข้อผิดพลาดและเป็นวิธีการที่แนะนำในการใช้แบบอักษร Google และแบบอักษรในเครื่องใน Next.js