A betűtípusok lassítják webhelye teljesítményét? Ezzel a csomaggal optimalizálhatja alkalmazása fontbetöltési idejét.
Érdemes lehet egyéni betűtípusokat használni, hogy a Next.js alkalmazást látványosabbá tegye. Az egyéni betűtípusok használata jelentősen javíthatja webhelye megjelenését és hangulatát, de lelassíthatja webhelye teljesítményét is, ha nincs megfelelően optimalizálva. A @next/font csomag megoldást kínál erre a problémára.
A @next/font csomag egyszerű és hatékony módot kínál a betűtípusok betöltésének optimalizálására a Next.js-ben, javítva az oldalbetöltési időt és az általános teljesítményt. Ez a cikk tájékoztatást nyújt a @next/font használatáról a Next.js projektben.
A csomag telepítése
Telepítheti a @next/font csomagot a következő parancs futtatásával a terminálon:
npm telepítés @next/font
Ha fonalat használ, a csomagot a következő parancs futtatásával telepítheti:
fonal hozzáadása @next/font
A @next/font használata a Google Fonts optimalizálásához
A @next/font csomag optimalizálja a Google betűtípusok használatát. A
@next/font automatikusan tárolja a Google betűtípusokat a Next.js szerveren, így nem küldenek kérést a Google-nak a betűtípusok beszerzésére.Ha Google-betűtípust szeretne használni az alkalmazásban, importálja a betűtípust függvényként innen @next/font/google ba,-be _app.js fájl a oldalakat Könyvtár:
import { Roboto } tól től"@next/font/google"const roboto = Roboto({ részhalmazok: ['latin'] })
exportalapértelmezettfunkcióMyApp({ Component, pageProps }) {
Visszatérés (
)
}
A fenti kódblokkban egy változó betűtípust hozott létre a Roboto betűtípus funkció. A részhalmaz property a betűtípust kizárólag a latin karakterekre állítja be; ha másik nyelvet használ, a betűtípust erre a nyelvre állíthatja be.
A betűtípus meghatározásakor a betűtípus súlyát is megadhatja:
const roboto = Roboto(
{
részhalmazok: ['latin'],
súly: '400',
stílus: "dőlt"
}
)
Tömbök segítségével több betűsúlyt és betűstílust is megadhat.
Például:
const roboto = Roboto(
{
részhalmazok: ['latin'],
súly: ['400', '500', '700'],
stílus: ["dőlt", 'Normál']
}
)
Ezután csomagolja be az alkatrészeket a fő- címkét, és adja át a betűtípust osztályként a fő- címke:
import { Roboto } tól től"@next/font/google"const roboto = Roboto(
{
részhalmazok: ['latin'],
súly: ['400', '500', '600'],
stílus: ["dőlt", 'Normál']
}
)
exportalapértelmezettfunkcióMyApp({ Component, pageProps }) {
Visszatérés (
</main>
)
}
Ha az alkalmazást a fenti kódblokk segítségével jeleníti meg, a betűtípus a teljes alkalmazásra vonatkozik. Alternatív megoldásként a betűtípust egyetlen oldalra is alkalmazhatja. Ehhez hozzáadja a betűtípust egy adott oldalhoz.
Például így:
import { Roboto } tól től"@next/font/google"const roboto = Roboto(
{
részhalmazok: ['latin'],
súly: ['400', '500', '600'],
stílus: ["dőlt", 'Normál']
}
)
exportalapértelmezettfunkcióitthon() {
Visszatérés (Sziasztok!!!</p>
</div>
)
}
A @next/font használata a helyi betűtípusok optimalizálásához
A @next/font csomag a helyi betűkészletek használatát is optimalizálja. A helyi betűtípusok optimalizálásának technikája a @next/font csomag meglehetősen hasonlít a Google betűtípusok optimalizálásához, apró eltérésekkel.
A helyi betűtípusok optimalizálásához használja a localFont által biztosított funkció @next/font csomag. Ön importálja a localFont funkciótól @next/font/local majd előtte definiálja a változó betűtípusát a Next.js alkalmazásban található betűtípus használatával.
Például így:
import localFont tól től"@next/font/local"const myFont = localFont({ src: './my-font.woff2' })
exportalapértelmezettfunkcióMyApp({ Component, pageProps }) {
Visszatérés (
</main>
)
}
Ön határozza meg a változó betűtípust myFont használni a localFont funkció. A localFont függvény egy objektumot vesz argumentumaként. Az objektumnak egyetlen tulajdonsága van, src, amely a betűtípusfájl elérési útjára van állítva a WOFF2 formátum "./my-font.woff2".
Egy betűtípuscsaládhoz több betűtípusfájlt is használhat. Ehhez beállítja a src tulajdonság egy tömbhöz, amely különböző betűtípusú objektumokat és azok tulajdonságait tartalmazza.
Például:
const myFont = localFont(
{
src: [
{
pálya: './Roboto-Regular.woff2',
súly: '400',
stílus: 'Normál',
},
{
pálya: './Roboto-Italic.woff2',
súly: '400',
stílus: "dőlt",
},
{
pálya: './Roboto-Bold.woff2',
súly: '700',
stílus: 'Normál',
},
{
pálya: './Roboto-BoldItalic.woff2',
súly: '700',
stílus: "dőlt",
},
]
}
)
A @next/font használata a Tailwind CSS-sel
Használatához a @next/font csomag Tailwind CSS-szel, CSS-változókat kell használnia. Ehhez meg kell határoznia a betűtípust a Google vagy a helyi betűtípusok segítségével, majd betöltenie kell a betűtípust a változó opcióval a CSS-változó nevének megadásához.
Például:
import { Inter } tól től"@next/font/google"const inter = Inter({
részhalmazok: ['latin'],
változó: "--font-inter",
})
exportalapértelmezettfunkcióMyApp({ Component, pageProps }) {
Visszatérés (`${inter.variable} font-sans`}>
</main>
)
}
A fenti kódblokkban létrehozta a betűtípust, inter, és állítsa be a változót --font-inter. A osztály név a fő elemet ezután a betűtípus változóra állítja és font-sans. A inter.változó osztály fogja alkalmazni a inter betűtípust az oldalra, és a font-sans osztály az alapértelmezett sans-serif betűtípust fogja alkalmazni.
Ezután adja hozzá a CSS-változót a tailwind konfigurációs fájlhoz tailwind.config.cjs:
/** @típus {import('tailwindcss').Config}*/
modult.exports = {
tartalom: ["./index.html",
"./src/**/*.{js, ts, jsx, tsx}",],
téma: {
kiterjeszt: {
betűtípus család: {
nélkül: ['var(--font-inter)'],
},
},
},
bővítmények: [],
}
Most már alkalmazhatja a betűtípust az alkalmazásban a font-sans osztály.
Betűtípus-optimalizálás @next/font segítségével
A @next/font csomag egyszerű és hatékony módja a betűtípusok betöltésének optimalizálásának a Next.js-ben. Ez a csomag biztosítja az egyéni betűtípusok hatékony betöltését, javítva ezzel a webhely teljesítményét és a felhasználói élményt. Ez a cikk tájékoztatást nyújt a @next/font csomag beállításáról és a Next.js alkalmazásban való használatáról. A képek optimalizálásával tovább javíthatja webhelye teljesítményét.