Hogyan optimalizálja a next/font a betűtípusokat?

Question

Accepted Answer

`next/font` automatikusan optimalizálja a webes betűtípusokat a teljesítmény javítása és az elrendezés eltolódásának kiküszöbölése érdekében — a betűtípusok önüzemeltetésével a fordítási időben és a betöltés részleteinek kezelésével az Ön helyett. ## Google-betűtípus használata ```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} ); } ``` ## Mit tesz automatikusan - **Önüzemeltetés** — a fordítási időben a Next letölti a Google-betűtípust és az **Ön** tartományáról szolgálja ki. Nincs kérés a Google-kiszolgálókhoz futási időben → gyorsabb és jobb az adatvédelemhez (nincs harmadik fél nyomon követése). - **Zéró elrendezés eltolódás** — kiszámítja a tartalék betűtípus metrikáit a webes betűtípussal való egyezéshez, így amikor az igazi betűtípus cserélődik, a szöveg nem ugrál (védi a CLS-t). - **Előtöltés és részhalmazosítás** — előtölti a betűtípust és csak a megadott karakterrészhalmazokat tartalmazza, csökkentve a letöltést. - **Nincs renderelést blokkoló kérés** — a betűtípusok az Ön fordításának részei, nem blokkoló külső lekérés. ## Helyi betűtípusok ```tsx import localFont from "next/font/local"; const myFont = localFont({ src: "./MyFont.woff2", display: "swap" }); ``` ## Miért fontos a betűtípus optimalizálása A betűtípusok egy klasszikus teljesítmény és CLS probléma: egy harmadik fél által történő lekérés, amely blokkolja a szöveg renderelését, majd elrendezés ugrást okoz, amikor a betűtípus betöltődik (FOUT/FOIT). Ennek kézi elvégzéséhez `@font-face`, `font-display`, előtöltés és tartalék-metrika egyezés szükséges. ## Miért fontos A `next/font` automatizálja a teljes betűtípus-teljesítmény ellenőrzőlistát — önüzemeltetés (sebesség + adatvédelem), részhalmazosítás és előtöltés (kisebb, gyorsabb), és tartalék-metrika egyezés (nincs elrendezés eltolódás) — egyetlen importálás mögött. Elveszi a zavaros, könnyen hibázható optimalizálást, és az ajánlott módszer a Google és helyi betűtípusok Next.js-ben való használatához.