Conas a dhéanann next/font na clóchur a bharrfheidhmiú?

Question

IT Interview Practice · Accepted Answer

`next/font` a dhéanann gréine ar dhóigh dhomhain do chóireála gréine gréine, agus téir ar do riachtanais — má bhíonn na clóchur fé chéile ag am tógála agus a bhainistiú na sonraí uachtar duit. ## Clóchur Google a úsáid ```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} ); } ``` ## Cad a dhéanann sé go huathoibríoch - **Féin-óstáil** — ag am tógála, íosluann Next an Clóchur Google agus fógraíonn sé ó **do** théarmainn. Gan iarratas ar fhreastalaí Google ag am feidhmithe → níos gasta agus níos fearr do phríobháideacht (gan fianáin tríú páirtí). - **Zéro-ghealadh leagan amach** — ríomhann sé méadracht an chló faillí chun a bheith i gcomhthéacs leis an gclóchur gréine, mar sin nuair a bhíonn an fhíor-chlóchur i bhfeidhm, ní léimíonn an téacs (cosnaíonn CLS). - **Réamhuachta & foibhriú** — réamhuachtaíonn an clóchur agus cuimsíonn sé na fo-thacair carachtar sonraithe amháin, ag laghdú an íoslódála. - **Gan iarratas blocála-dhéanmhachta** — tá na clóchur i gcuid de do thógáil, ní fhiosrúchán toisigh blocála. ## Clóchur áitiúil ```tsx import localFont from "next/font/local"; const myFont = localFont({ src: "./MyFont.woff2", display: "swap" }); ``` ## Cén fáth go bhfuil clóchur tábhachtach Clóchur a bhíonn ina fhadhb fhairsing ar fheidhmíochta agus CLS: fiosrúchán tríú páirtí a bhacann an léamh téacs, agus ansin soilsiú leagan amach nuair a bhíonn an clóchur luchtaithe (FOUT/FOIT). A dhéanamh seo i gceart go láimhe, tá gá agat `@font-face`, `font-display`, réamhuachta, agus meáchain faillí-chomthéacs. ## Cén fáth go bhfuil sé tábhachtach `next/font` a dhéanann an liosta seiceála iomlán ar bharrfheidhmíochta clóchur — féin-óstáil (luas + príobháideacht), fo-thacair agus réamhuachta (níos beag, níos gasta), agus comhthéacs meáchain faillí (gan gealadh leagan amach) — taobh thiar de dhún iompórtáil. Baineann sé a dhéanamh feidhm ar bharrfheidhmíochta fánach agus furasta go mícheart agus is é an bealach a mholtar a úsáid na clóchur Google agus áitiúil i Next.js.

Clóchur Google a úsáid

Cad a dhéanann sé go huathoibríoch

Clóchur áitiúil

Cén fáth go bhfuil clóchur tábhachtach

Cén fáth go bhfuil sé tábhachtach

Ceisteanna gaolmhara