Kā lietot @next/font, lai optimizētu fontus vietnē Next.js

Iespējams, vēlēsities izmantot pielāgotus fontus, lai padarītu savu Next.js lietojumprogrammu vizuāli pievilcīgāku. Pielāgotu fontu izmantošana var ievērojami uzlabot jūsu vietnes izskatu un darbību, taču tā var arī palēnināt vietnes veiktspēju, ja tā nav pareizi optimizēta. The @next/fonts pakete ir šīs problēmas risinājums.

@next/font pakotne nodrošina vienkāršu un efektīvu veidu, kā optimizēt fontu ielādi programmā Next.js, uzlabojot lapas ielādes laiku un kopējo veiktspēju. Šajā rakstā ir sniegta informācija par to, kā izmantot @next/font savā Next.js projektā.

Pakotnes instalēšana

Jūs varat instalēt @next/fonts pakotni, terminālī izpildot šādu komandu:

npm instalēt @next/font

Ja izmantojat dziju, varat instalēt pakotni, izpildot šo komandu:

dziju pievieno @next/font

@next/font izmantošana, lai optimizētu Google fontus

The @next/fonts pakotne optimizē Google fontu izmantošanu. The

@next/fonts automātiski pats mitina Google fontus serverī Next.js, lai uzņēmumam Google netiktu nosūtīts pieprasījums iegūt fontus.

Lai savā lietojumprogrammā izmantotu Google fontu, jūs importēsit fontu kā funkciju no @next/font/google iekšā _app.js failu mapē lapas direktorijs:

imports { Roboto } no"@next/font/google"
konst roboto = Roboto({ apakškopas: ['latīņu'] })
eksportētnoklusējumafunkcijuMyApp({ Component, pageProps }) {
atgriezties (

 )
}

Iepriekš esošajā koda blokā jūs izveidojāt mainīgo fontu, izmantojot Roboto fonta funkcija. The apakškopa Īpašums nosaka fonta apakškopu tikai latīņu rakstzīmēm; ja izmantojat citu valodu, varat apakšiestatīt fontu šai valodai.

Definējot fontu, varat norādīt arī fonta svaru un fonta stilu:

konst roboto = Roboto( 
 {
 apakškopas: ['latīņu'],
 svars: '400',
 stils: "slīps"
 }
)

Izmantojot masīvus, jūs norādāt vairākus fontu svarus un fontu stilus.

Piemēram:

konst roboto = Roboto( 
 {
 apakškopas: ['latīņu'],
 svars: ['400', '500', '700'],
 stils: ["slīps", 'normāls']
 }
)

Pēc tam jūs iesaiņosiet sastāvdaļas a galvenais atzīmējiet un nododiet fontu kā klasi uz galvenais tags:

imports { Roboto } no"@next/font/google"
konst roboto = Roboto( 
 {
 apakškopas: ['latīņu'],
 svars: ['400', '500', '600'],
 stils: ["slīps", 'normāls']
 }
)
eksportētnoklusējumafunkcijuMyApp({ Component, pageProps }) {
atgriezties (


 </main>
 )
}

Atveidojot lietojumprogrammu, izmantojot iepriekš minēto koda bloku, fonts tiks lietots visai lietojumprogrammai. Varat arī lietot fontu vienai lapai. Lai to izdarītu, jāpievieno fonts noteiktai lapai.

Tā kā:

imports { Roboto } no"@next/font/google"
konst roboto = Roboto( 
 {
 apakškopas: ['latīņu'],
 svars: ['400', '500', '600'],
 stils: ["slīps", 'normāls']
 }
)
eksportētnoklusējumafunkcijuMājas() {
atgriezties (


Sveiki!!!</p>
 </div>
 )
}

Izmantojot @next/font, lai optimizētu vietējos fontus

The @next/fonts pakotne arī optimizē vietējo fontu izmantošanu. Vietējo fontu optimizēšanas paņēmiens, izmantojot @next/fonts pakotne ir diezgan līdzīga Google fontu optimizācijai, ar nelielām atšķirībām.

Lai optimizētu vietējos fontus, izmantojiet vietējais fonts funkcija, ko nodrošina @next/fonts iepakojums. Jūs importējat vietējais fonts funkcija no @next/font/local un pēc tam iepriekš definējiet mainīgo fontu izmantojot fontu savā Next.js lietojumprogrammā.

Tā kā:

imports vietējais fonts no"@next/font/local"
konst myFont = vietējaisFonts({ src: './my-font.woff2' })
eksportētnoklusējumafunkcijuMyApp({ Component, pageProps }) {
atgriezties (


 </main>
 )
}

Jūs definējat mainīgā fontu myFont izmantojot vietējais fonts funkciju. The vietējais fonts funkcija kā argumentu izmanto objektu. Objektam ir viens īpašums, src, kas ir iestatīts uz fonta faila faila ceļu WOFF2 formātā "./my-font.woff2".

Vienai fontu saimei varat izmantot vairākus fontu failus. Lai to izdarītu, iestatiet src rekvizītu masīvam, kurā ir dažādu fontu objekti un to īpašības.

Piemēram:

konst myFont = localFont( 
 {
 src: [
 {
 ceļš: './Roboto-Regular.woff2',
 svars: '400',
 stils: 'normāls',
 },
 {
 ceļš: './Roboto-Italic.woff2',
 svars: '400',
 stils: "slīps",
 },
 {
 ceļš: './Roboto-Bold.woff2',
 svars: '700',
 stils: 'normāls',
 },
 {
 ceļš: './Roboto-BoldItalic.woff2',
 svars: '700',
 stils: "slīps",
 },
 ]
 }
)

Izmantojot @next/font ar Tailwind CSS

Lai izmantotu @next/fonts pakotne ar Tailwind CSS, jums ir jāizmanto CSS mainīgie. Lai to izdarītu, jums būs jādefinē fonts, izmantojot Google vai vietējos fontus, un pēc tam jāielādē fonts ar mainīgā opciju, lai norādītu CSS mainīgā nosaukumu.

Piemēram:

imports { Inter } no"@next/font/google"
konst inter = Inter({
 apakškopas: ['latīņu'],
 mainīgais: '--font-inter',
})
eksportētnoklusējumafunkcijuMyApp({ Component, pageProps }) {
atgriezties (
`${inter.variable} font-sans”.}>

 </main>
 )
}

Iepriekš esošajā koda blokā jūs izveidojāt fontu, starp, un iestatiet mainīgo uz --font-inter. The klasesNosaukums no galvenā elementa tiek iestatīts uz fonta mainīgo un font-sans. The starp.mainīgs klase piemēros starp fontu uz lapu un font-sans klase izmantos noklusējuma sans-serif fontu.

Pēc tam pievienojiet CSS mainīgo tailwind konfigurācijas failam tailwind.config.cjs:

/** @tips {import('tailwindcss').Config}*/
modulis.exports = {
 saturs: ["./index.html",
"./src/**/*.{js, ts, jsx, tsx}",],
 tēma: {
 paplašināt: {
 fontFamily: {
 bez: ['var(--font-inter)'],
 },
 },
 },
 spraudņi: [],
}

Tagad varat lietot fontu savā lietojumprogrammā, izmantojot font-sans klasē.

Fontu optimizācija ar @next/font

@next/font pakotne ir vienkāršs un efektīvs veids, kā optimizēt fontu ielādi programmā Next.js. Šī pakotne nodrošina jūsu pielāgoto fontu efektīvu ielādi, uzlabojot jūsu vietnes veiktspēju un lietotāja pieredzi. Šajā rakstā ir sniegta informācija par to, kā iestatīt @next/font pakotni un izmantot to lietojumprogrammā Next.js. Varat vēl vairāk uzlabot savas vietnes veiktspēju, optimizējot attēlus.