Ali pisave upočasnjujejo delovanje vašega spletnega mesta? S tem paketom optimizirajte čas nalaganja pisave vaše aplikacije.
Morda boste želeli uporabiti pisave po meri, da bo vaša aplikacija Next.js bolj vizualno privlačna. Uporaba pisav po meri lahko znatno izboljša videz in občutek vašega spletnega mesta, lahko pa tudi upočasni delovanje vašega spletnega mesta, če ni pravilno optimizirano. The @naprej/pisava paket je rešitev tega problema.
Paket @next/font ponuja preprost in učinkovit način za optimizacijo nalaganja pisav v Next.js, izboljšanje časa nalaganja strani in splošne zmogljivosti. Ta članek vsebuje informacije o uporabi @next/font v projektu Next.js.
Namestitev paketa
Lahko namestite @naprej/pisava paket tako, da v terminalu zaženete naslednji ukaz:
npm namestite @next/font
Če uporabljate yarn, lahko paket namestite tako, da zaženete ta ukaz:
preja dodaj @naprej/pisava
Uporaba @next/font za optimizacijo Google Fonts
The @naprej/pisava paket optimizira uporabo Googlovih pisav. The
@naprej/pisava samodejno samostojno gosti Googlove pisave na strežniku Next.js, tako da Googlu ni poslana nobena zahteva za pridobitev pisav.Če želite v svoji aplikaciji uporabiti Googlovo pisavo, jo uvozite kot funkcijo iz @naprej/font/google v _app.js datoteka v strani imenik:
uvoz { Roboto } od'@naprej/font/google'konst roboto = Roboto({ podmnožice: ['latin'] })
izvozprivzetofunkcijoMyApp({ Komponenta, pageProps }) {
vrnitev (
)
}
V zgornjem bloku kode ste ustvarili spremenljivo pisavo z uporabo Roboto funkcijo pisave. The podnabor lastnost podnastavi pisavo samo na latinične znake; če uporabljate drug jezik, lahko podnastavite pisavo na ta jezik.
Pri določanju pisave lahko določite tudi težo pisave skupaj s slogom pisave:
konst roboto = Roboto(
{
podnabori: ['latin'],
utež: '400',
slog: 'ležeče'
}
)
Z nizi določite več tež in slogov pisav.
Na primer:
konst roboto = Roboto(
{
podnabori: ['latin'],
utež: ['400', '500', '700'],
slog: ['ležeče', 'normalno']
}
)
Nato boste svoje komponente zavili v a glavni oznako in posredujte pisavo kot razred v glavni oznaka:
uvoz { Roboto } od'@naprej/font/google'konst roboto = Roboto(
{
podnabori: ['latin'],
utež: ['400', '500', '600'],
slog: ['ležeče', 'normalno']
}
)
izvozprivzetofunkcijoMyApp({ Komponenta, pageProps }) {
vrnitev (
</main>
)
}
Upodabljanje vaše aplikacije z zgornjim blokom kode bo uporabilo pisavo za celotno aplikacijo. Druga možnost je, da pisavo uporabite na eni strani. Če želite to narediti, dodate pisavo na določeno stran.
takole:
uvoz { Roboto } od'@naprej/font/google'konst roboto = Roboto(
{
podnabori: ['latin'],
utež: ['400', '500', '600'],
slog: ['ležeče', 'normalno']
}
)
izvozprivzetofunkcijodomov() {
vrnitev (Pozdravljeni!!!</p>
</div>
)
}
Uporaba @next/font za optimizacijo lokalnih pisav
The @naprej/pisava paket optimizira tudi uporabo lokalnih pisav. Tehnika optimizacije lokalnih pisav prek @naprej/pisava paket je precej podoben optimizaciji Googlovih pisav, z majhnimi razlikami.
Če želite optimizirati lokalne pisave, uporabite localFont funkcijo, ki jo zagotavlja @naprej/pisava paket. Uvažate localFont funkcijo od @naslednja/pisava/lokalno in nato določite svojo spremenljivo pisavo prej z uporabo pisave v vaši aplikaciji Next.js.
takole:
uvoz localFont od'@next/font/local'konst myFont = localFont({ src: './my-font.woff2' })
izvozprivzetofunkcijoMyApp({ Komponenta, pageProps }) {
vrnitev (
</main>
)
}
Vi določite spremenljivo pisavo myFont uporabljati localFont funkcijo. The localFont funkcija vzame predmet kot argument. Objekt ima eno lastnost, src, ki je nastavljena na pot do datoteke pisave v datoteki WOFF2 format "./moja-font.woff2".
Za eno družino pisav lahko uporabite več datotek s pisavami. Če želite to narediti, nastavite src v matriko, ki vsebuje objekte različnih pisav in njihove lastnosti.
Na primer:
konst myFont = localFont(
{
src: [
{
pot: './Roboto-Regular.woff2',
utež: '400',
slog: 'normalno',
},
{
pot: './Roboto-Italic.woff2',
utež: '400',
slog: 'ležeče',
},
{
pot: './Roboto-Bold.woff2',
utež: '700',
slog: 'normalno',
},
{
pot: './Roboto-BoldItalic.woff2',
utež: '700',
slog: 'ležeče',
},
]
}
)
Uporaba @next/font s CSS Tailwind
Za uporabo @naprej/pisava paket s Tailwind CSS, morate uporabiti spremenljivke CSS. To naredite tako, da določite svojo pisavo z Googlovimi ali lokalnimi pisavami in nato naložite svojo pisavo z možnostjo spremenljivke, da določite ime spremenljivke CSS.
Na primer:
uvoz { Inter } od'@naprej/font/google'konst inter = Inter({
podnabori: ['latin'],
spremenljivka: '--font-inter',
})
izvozprivzetofunkcijoMyApp({ Komponenta, pageProps }) {
vrnitev (`${inter.variable} font-sans`}>
</main>
)
}
V zgornjem bloku kode ste ustvarili pisavo, med, in nastavite spremenljivko na --font-inter. The className glavnega elementa se nato nastavi na spremenljivko pisave in font-sans. The med.spremenljivka razred bo uporabil inter pisavo na stran in font-sans bo uporabil privzeto pisavo sans-serif.
Nato dodate spremenljivko CSS v konfiguracijsko datoteko tailwind tailwind.config.cjs:
/** @vrsta {import('tailwindcss').Config}*/
modul.exports = {
vsebina: ["./index.html",
"./src/**/*.{js, ts, jsx, tsx}",],
tema: {
razširi: {
fontFamily: {
sans: ['var(--font-inter)'],
},
},
},
vtičniki: [],
}
Zdaj lahko uporabite pisavo v svoji aplikaciji z uporabo font-sans razred.
Optimizacija pisave z @next/font
Paket @next/font je preprost in učinkovit način za optimizacijo nalaganja pisav v Next.js. Ta paket zagotavlja, da se vaše pisave po meri učinkovito naložijo, s čimer se izboljša delovanje vašega spletnega mesta in uporabniška izkušnja. Ta članek ponuja informacije o tem, kako nastavite paket @next/font in ga uporabite v svoji aplikaciji Next.js. Učinkovitost spletnega mesta lahko še izboljšate z optimizacijo slik.
