Kuidas kasutada @next/fonti fontide optimeerimiseks rakenduses Next.js

Võite kasutada kohandatud fonte, et muuta rakendus Next.js visuaalselt atraktiivsemaks. Kohandatud fontide kasutamine võib teie veebisaidi välimust ja tunnetust märkimisväärselt parandada, kuid see võib ka aeglustada teie saidi toimivust, kui seda ei optimeerita õigesti. The @next/font pakett on sellele probleemile lahendus.

Pakett @next/font pakub lihtsat ja tõhusat viisi fondi laadimise optimeerimiseks rakenduses Next.js, parandades lehe laadimisaega ja üldist jõudlust. See artikkel annab teavet selle kohta, kuidas kasutada @next/fonti oma projektis Next.js.

Paketi paigaldamine

Saate installida @next/font paketti, käivitades oma terminalis järgmise käsu:

npm install @next/font

Kui kasutate lõnga, saate paketi installida, käivitades selle käsu:

lõng lisa @next/font

@next/font kasutamine Google'i fontide optimeerimiseks

The @next/font pakett optimeerib Google'i fontide kasutamist. The

@next/font hostib automaatselt Google'i fonte serveris Next.js, nii et Google'ile ei saadeta fontide hankimiseks taotlust.

Google'i fondi kasutamiseks oma rakenduses impordite fondi funktsioonina @next/font/google sisse _app.js faili lehekülgi kataloog:

importida { Roboto } alates'@next/font/google'
konst roboto = Roboto({ alamhulgad: ['ladina'] })
eksportidavaikimisifunktsiooniMinuApp({ Component, pageProps }) {
tagasi (

 )
}

Ülaltoodud koodiplokis lõite muutuva fondi, kasutades Roboto fondi funktsioon. The alamhulk atribuut määrab fondi alamhulgaks ainult ladina tähed; kui kasutate mõnda muud keelt, saate fondi selle keele alla määrata.

Fondi määratlemisel saate määrata ka fondi kaalu ja fondi stiili:

konst roboto = Roboto( 
 {
 alamhulgad: ['ladina'],
 kaal: '400',
 stiil: "kaldkiri"
 }
)

Massiivide abil saate määrata mitu fondi kaalu ja fondi stiili.

Näiteks:

konst roboto = Roboto( 
 {
 alamhulgad: ['ladina'],
 kaal: ['400', '500', '700'],
 stiil: ["kaldkiri", 'tavaline']
 }
)

Järgmisena mähkige oma komponendid a peamine sildistage ja edastage font klassina peamine silt:

importida { Roboto } alates'@next/font/google'
konst roboto = Roboto( 
 {
 alamhulgad: ['ladina'],
 kaal: ['400', '500', '600'],
 stiil: ["kaldkiri", 'tavaline']
 }
)
eksportidavaikimisifunktsiooniMinuApp({ Component, pageProps }) {
tagasi (


 </main>
 )
}

Rakenduse renderdamisel ülaltoodud koodiplokiga rakendatakse font kogu teie rakendusele. Teise võimalusena saate fondi rakendada ühele lehele. Selleks lisate fondi kindlale lehele.

Nagu nii:

importida { Roboto } alates'@next/font/google'
konst roboto = Roboto( 
 {
 alamhulgad: ['ladina'],
 kaal: ['400', '500', '600'],
 stiil: ["kaldkiri", 'tavaline']
 }
)
eksportidavaikimisifunktsiooniKodu() {
tagasi (


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

@next/font kasutamine kohalike fontide optimeerimiseks

The @next/font pakett optimeerib ka kohalike fontide kasutamist. Kohalike fontide optimeerimise tehnika @next/font pakett on üsna sarnane Google'i fontide optimeerimisega, väikeste erinevustega.

Kohalike fontide optimeerimiseks kasutage kohalik Font pakutav funktsioon @next/font pakett. Sa impordid kohalik Font funktsioon alates @next/font/local ja seejärel määrake oma muutuv font enne kasutades fonti rakenduses Next.js.

Nagu nii:

importida kohalik Font alates'@next/font/local'
konst myFont = localFont({ src: './my-font.woff2' })
eksportidavaikimisifunktsiooniMinuApp({ Component, pageProps }) {
tagasi (


 </main>
 )
}

Määrate muutuva fondi minuFont kasutades kohalik Font funktsiooni. The kohalik Font funktsioon võtab oma argumendiks objekti. Objektil on üks omadus, src, mis on määratud fondi faili teele WOFF2 vormingus "./my-font.woff2".

Ühe fondiperekonna jaoks saate kasutada mitut fondifaili. Selleks määrate src atribuut massiivile, mis sisaldab erinevate fontidega objekte ja nende omadusi.

Näiteks:

konst myFont = localFont( 
 {
 src: [
 {
 tee: './Roboto-Regular.woff2',
 kaal: '400',
 stiil: 'tavaline',
 },
 {
 tee: './Roboto-Italic.woff2',
 kaal: '400',
 stiil: "kaldkiri",
 },
 {
 tee: './Roboto-Bold.woff2',
 kaal: '700',
 stiil: 'tavaline',
 },
 {
 tee: './Roboto-BoldItalic.woff2',
 kaal: '700',
 stiil: "kaldkiri",
 },
 ]
 }
)

@next/font kasutamine Tailwind CSS-iga

Et kasutada @next/font pakett Tailwind CSS-iga, peate kasutama CSS-i muutujaid. Selleks määrate oma fondi Google'i või kohalike fontide abil ja seejärel laadite oma fondi muutujavalikuga, et määrata CSS-muutuja nimi.

Näiteks:

importida { Inter } alates'@next/font/google'
konst inter = Inter({
 alamhulgad: ['ladina'],
 muutuja: '--font-inter',
})
eksportidavaikimisifunktsiooniMinuApp({ Component, pageProps }) {
tagasi (
`${inter.variable} font-sans`}>

 </main>
 )
}

Ülaltoodud koodiplokis lõite fondi, inter, ja määrake muutuja väärtuseks --font-inter. The klassi nimi põhielemendist määratakse seejärel fondimuutuja ja font-sans. The inter.muutuja klass rakendab inter fonti lehele ja font-sans klass rakendab vaikefondi sans-serif.

Järgmisena lisate CSS-i muutuja taganttuule konfiguratsioonifaili tailwind.config.cjs:

/** @tüüp {import('tailwindcss').Config}*/
moodul.exports = {
 sisu: ["./index.html",
"./src/**/*.{js, ts, jsx, tsx}",],
 teema: {
 pikendada: {
 fontFamily: {
 ilma: ['var(--font-inter)'],
 },
 },
 },
 pluginad: [],
}

Nüüd saate fondi oma rakenduses rakendada, kasutades font-sans klass.

Fondi optimeerimine @next/font abil

Pakett @next/font on lihtne ja tõhus viis fondi laadimise optimeerimiseks rakenduses Next.js. See pakett tagab teie kohandatud fontide tõhusa laadimise, parandades teie veebisaidi jõudlust ja kasutajakogemust. See artikkel sisaldab teavet selle kohta, kuidas seadistada @next/font paketti ja kasutada seda rakenduses Next.js. Saate oma saidi toimivust veelgi parandada, optimeerides pilte.