Kako koristiti @next/font za optimizaciju fontova u Next.js

Možda ćete htjeti koristiti prilagođene fontove kako biste svoju Next.js aplikaciju učinili vizualno privlačnijom. Korištenje prilagođenih fontova može značajno poboljšati izgled i dojam vaše web stranice, ali također može usporiti izvedbu vaše web stranice ako nije pravilno optimizirana. The @sljedeće/font paket je rješenje za ovaj problem.

Paket @next/font pruža jednostavan i učinkovit način za optimizaciju učitavanja fontova u Next.js, poboljšavajući vrijeme učitavanja stranice i ukupnu izvedbu. Ovaj članak pruža informacije o tome kako koristiti @next/font u vašem projektu Next.js.

Instalacija paketa

Možete instalirati @sljedeće/font paket pokretanjem sljedeće naredbe na vašem terminalu:

npm instalirajte @next/font

Ako koristite yarn, možete instalirati paket pokretanjem ove naredbe:

pređa dodaj @sljedeće/font

Korištenje @next/font za optimizaciju Google Fontova

The

@sljedeće/font paket optimizira korištenje Google fontova. The @sljedeće/font automatski samostalno hostira Googleove fontove na poslužitelju Next.js tako da se Googleu ne šalje zahtjev za dobivanje fontova.

Da biste koristili Google font u svojoj aplikaciji, uvest ćete font kao funkciju iz @sljedeći/font/google u _app.js datoteka u stranice imenik:

uvoz { Roboto } iz'@sljedeći/font/google'
konst roboto = Roboto({ podskupovi: ['latinski'] })
izvozzadanofunkcijaMyApp({ Komponenta, pageProps }) {
povratak (

 )
}

U gornjem bloku koda stvorili ste varijabilni font pomoću Roboto funkcija fonta. The podskup svojstvo postavlja font samo na latinične znakove; ako koristite drugi jezik, možete postaviti font na taj jezik.

Također možete odrediti težinu fonta zajedno sa stilom fonta prilikom definiranja fonta:

konst roboto = Roboto( 
 {
 podskupovi: ['latinski'],
 težina: '400',
 stil: 'kurziv'
 }
)

Navodite višestruke težine i stilove fonta pomoću nizova.

Na primjer:

konst roboto = Roboto( 
 {
 podskupovi: ['latinski'],
 težina: ['400', '500', '700'],
 stil: ['kurziv', 'normalan']
 }
)

Zatim ćete zamotati svoje komponente u a glavni označite i proslijedite font kao klasu u glavni označiti:

uvoz { Roboto } iz'@sljedeći/font/google'
konst roboto = Roboto( 
 {
 podskupovi: ['latinski'],
 težina: ['400', '500', '600'],
 stil: ['kurziv', 'normalan']
 }
)
izvozzadanofunkcijaMyApp({ Komponenta, pageProps }) {
povratak (


 </main>
 )
}

Iscrtavanje vaše aplikacije s gornjim blokom koda primijenit će font na cijelu vašu aplikaciju. Alternativno, možete primijeniti font na jednu stranicu. Da biste to učinili, dodajte font na određenu stranicu.

ovako:

uvoz { Roboto } iz'@sljedeći/font/google'
konst roboto = Roboto( 
 {
 podskupovi: ['latinski'],
 težina: ['400', '500', '600'],
 stil: ['kurziv', 'normalan']
 }
)
izvozzadanofunkcijaDom() {
povratak (


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

Korištenje @next/font za optimizaciju lokalnih fontova

The @sljedeće/font paket također optimizira korištenje lokalnih fontova. Tehnika optimizacije lokalnih fontova putem @sljedeće/font paket je prilično sličan optimizaciji Google fontova, uz suptilne razlike.

Za optimizaciju lokalnih fontova upotrijebite lokalniFont funkcija koju pruža @sljedeće/font paket. Vi uvozite lokalniFont funkcija iz @sljedeći/font/lokalno a zatim prije toga definirajte svoj varijabilni font koristeći font u vašoj aplikaciji Next.js.

ovako:

uvoz lokalniFont iz'@sljedeći/font/lokalno'
konst mojFont = lokalniFont({ src: './my-font.woff2' })
izvozzadanofunkcijaMyApp({ Komponenta, pageProps }) {
povratak (


 </main>
 )
}

Vi definirate promjenjivi font mojFont koristiti lokalniFont funkcija. The lokalniFont funkcija uzima objekt kao argument. Objekt ima jedno svojstvo, src, koji je postavljen na stazu datoteke fonta u WOFF2 format "./moj-font.woff2".

Možete koristiti više datoteka fontova za jednu obitelj fontova. Da biste to učinili, postavite src svojstvo u polje koje sadrži objekte različitih fontova i njihova svojstva.

Na primjer:

konst mojFont = lokalniFont( 
 {
 src: [
 {
 staza: './Roboto-Regular.woff2',
 težina: '400',
 stil: 'normalan',
 },
 {
 staza: './Roboto-Italic.woff2',
 težina: '400',
 stil: 'kurziv',
 },
 {
 staza: './Roboto-Bold.woff2',
 težina: '700',
 stil: 'normalan',
 },
 {
 staza: './Roboto-BoldItalic.woff2',
 težina: '700',
 stil: 'kurziv',
 },
 ]
 }
)

Korištenje @next/font s Tailwind CSS-om

Za korištenje @sljedeće/font paket s Tailwind CSS-om, trebate koristiti CSS varijable. Da biste to učinili, definirat ćete svoj font pomoću Googleovih ili lokalnih fontova, a zatim učitati svoj font s opcijom varijable za navođenje naziva CSS varijable.

Na primjer:

uvoz { Inter } iz'@sljedeći/font/google'
konst inter = Inter({
 podskupovi: ['latinski'],
 varijabla: '--font-inter',
})
izvozzadanofunkcijaMyApp({ Komponenta, pageProps }) {
povratak (
`${inter.variable} font-sans`}>

 </main>
 )
}

U gornjem bloku koda stvorili ste font, između, i postavite varijablu na --font-inter. The naziv klase glavnog elementa tada se postavlja na varijablu fonta i font-sans. The među.varijabla razred će primijeniti između font na stranicu i font-sans klasa će primijeniti zadani sans-serif font.

Zatim dodajete CSS varijablu konfiguracijskoj datoteci tailwind stražnji vjetar.config.cjs:

/** @tip {import('tailwindcss').Config}*/
modul.izvoz = {
 sadržaj: ["./index.html",
"./src/**/*.{js, ts, jsx, tsx}",],
 tema: {
 proširiti: {
 fontFamily: {
 sans: ['var(--font-inter)'],
 },
 },
 },
 dodaci: [],
}

Sada možete primijeniti font u svojoj aplikaciji pomoću font-sans razreda.

Optimizacija fonta s @next/font

Paket @next/font jednostavan je i učinkovit način za optimizaciju učitavanja fontova u Next.js. Ovaj paket osigurava da se vaši prilagođeni fontovi učinkovito učitavaju, poboljšavajući performanse vaše web stranice i korisničko iskustvo. Ovaj članak pruža informacije o tome kako postaviti paket @next/font i koristiti ga u svojoj aplikaciji Next.js. Optimiziranjem slika možete dodatno poboljšati izvedbu svoje stranice.