Kako next/font optimizira pisave?

Question

Accepted Answer

`next/font` samodejno optimizira spletne pisave za izboljšanje zmogljivosti in odpravitev premika postavitve — samohosting pisav v času gradnje in upravljanje podrobnosti nalaganja za vas. ## Uporaba Google pisave ```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} ); } ``` ## Kaj naredi samodejno - **Samohosting** — v času gradnje Next preusmeri Google pisavo in jo streža z **vaše** domene. Ni zahtevka na Googlove strežnike med izvajanjem → hitreje in bolje za zasebnost (brez spremljanja tretje osebe). - **Ničeln premik postavitve** — izračuna meritve nadomestne pisave, ki se ujemajo s spletno pisavo, zato se besedilo ne premakne, ko se prava pisava zamenja (varuje CLS). - **Predhodno nalaganje in subsetting** — prethodno naloži pisavo in vključi samo navedene podmnožice znakov, kar zmanjša prenos. - **Ni blokirajoče zahteve za upodabljanje** — pisave so del vaše gradnje, ne blokirajoče zunanje preneske. ## Lokalne pisave ```tsx import localFont from "next/font/local"; const myFont = localFont({ src: "./MyFont.woff2", display: "swap" }); ``` ## Zakaj je optimizacija pisav pomembna Pisave so klasičen problem zmogljivosti in CLS: prenos tretje osebe, ki blokira upodabljanje besedila, nato pa povzroči premik postavitve, ko se pisava naloži (FOUT/FOIT). Korektna ročna izvedba zahteva `@font-face`, `font-display`, predhodno nalaganje in ujemanje metrik nadomestnih pisav. ## Zakaj je to pomembno `next/font` avtomatizira celoten seznam kontrole zmogljivosti pisav — samohosting (hitrost + zasebnost), subsetting in predhodno nalaganje (manjše, hitrejše) in ujemanje metrik nadomestnih pisav (brez premika postavitve) — za enim uvozom. Odstrani mukotrpno, enostavno napačno optimizacijo in je priporočeni način za uporabo tako Googlovih kot lokalnih pisav v Next.js.