Ako používať @next/font na optimalizáciu písiem v Next.js

Možno budete chcieť použiť vlastné písma, aby bola vaša aplikácia Next.js vizuálne príťažlivejšia. Používanie vlastných písiem môže výrazne zlepšiť vzhľad a dojem z vášho webu, ale môže tiež spomaliť výkon vášho webu, ak nie je správne optimalizovaný. The @ďalší/font Balíček je riešením tohto problému.

Balík @next/font poskytuje jednoduchý a efektívny spôsob optimalizácie načítania písma v Next.js, čím sa skráti čas načítania stránky a celkový výkon. Tento článok poskytuje informácie o tom, ako používať @next/font v projekte Next.js.

Inštalácia balíka

Môžete nainštalovať @ďalší/font balík spustením nasledujúceho príkazu vo vašom termináli:

npm install @next/font

Ak používate priadzu, balík môžete nainštalovať spustením tohto príkazu:

priadza pridať @next/font

Pomocou @next/font môžete optimalizovať písma Google

The @ďalší/font balík optimalizuje používanie písiem Google. The @ďalší/font automaticky samohostí písma Google na serveri Next.js, takže spoločnosti Google sa neodošle žiadna žiadosť o získanie písma.

Ak chcete vo svojej aplikácii použiť písmo Google, importujte písmo ako funkciu z @next/font/google do _app.js súbor v stránky adresár:

importovať { Roboto } od„@next/font/google“
konšt roboto = Roboto({ podmnožiny: ['latinsky'] })
exportpredvolenáfunkciuMyApp({ Component, pageProps }) {
vrátiť (

 )
}

V bloku kódu vyššie ste vytvorili variabilné písmo pomocou Roboto funkcia písma. The podmnožina vlastnosť podnastaví písmo iba na znaky latinky; ak používate iný jazyk, môžete písmo podriadiť tomuto jazyku.

Pri definovaní písma môžete spolu so štýlom písma určiť aj hmotnosť písma:

konšt roboto = Roboto( 
 {
 podmnožiny: ['latinsky'],
 hmotnosť: '400',
 štýl: 'kurzíva'
 }
)

Pomocou polí zadáte viacero hmotností a štýlov písma.

Napríklad:

konšt roboto = Roboto( 
 {
 podmnožiny: ['latinsky'],
 hmotnosť: ['400', '500', '700'],
 štýl: ['kurzíva', 'normálny']
 }
)

Ďalej zabalíte svoje komponenty do a Hlavná tag a odovzdať písmo ako triedu do Hlavná značka:

importovať { Roboto } od„@next/font/google“
konšt roboto = Roboto( 
 {
 podmnožiny: ['latinsky'],
 hmotnosť: ['400', '500', '600'],
 štýl: ['kurzíva', 'normálny']
 }
)
exportpredvolenáfunkciuMyApp({ Component, pageProps }) {
vrátiť (


 </main>
 )
}

Vykreslenie vašej aplikácie pomocou bloku kódu vyššie použije písmo na celú vašu aplikáciu. Prípadne môžete použiť písmo na jednu stranu. Ak to chcete urobiť, pridajte písmo na konkrétnu stránku.

Ako:

importovať { Roboto } od„@next/font/google“
konšt roboto = Roboto( 
 {
 podmnožiny: ['latinsky'],
 hmotnosť: ['400', '500', '600'],
 štýl: ['kurzíva', 'normálny']
 }
)
exportpredvolenáfunkciuDomov() {
vrátiť (


Dobrý deň!!!</p>
 </div>
 )
}

Pomocou @next/font môžete optimalizovať miestne písma

The @ďalší/font balík tiež optimalizuje používanie lokálnych písiem. Technika optimalizácie lokálnych písiem prostredníctvom @ďalší/font balík je dosť podobný optimalizácii písiem Google, s jemnými rozdielmi.

Ak chcete optimalizovať miestne písma, použite localFont funkciu, ktorú poskytuje @ďalší/font balík. Importujete localFont funkcia od @next/font/local a potom definujte svoje variabilné písmo predtým pomocou písma vo vašej aplikácii Next.js.

Ako:

importovať localFont od'@next/font/local'
konšt myFont = localFont({ src: './my-font.woff2' })
exportpredvolenáfunkciuMyApp({ Component, pageProps }) {
vrátiť (


 </main>
 )
}

Vy definujete variabilné písmo myFont pomocou localFont funkciu. The localFont funkcia berie objekt ako svoj argument. Objekt má jedinú vlastnosť, src, ktorá je nastavená na cestu k súboru fontu v WOFF2 formát "./my-font.woff2".

Pre jednu rodinu písiem môžete použiť viacero súborov písiem. Ak to chcete urobiť, nastavte src vlastnosť do poľa obsahujúceho objekty rôznych fontov a ich vlastnosti.

Napríklad:

konšt myFont = localFont( 
 {
 src: [
 {
 cesta: './Roboto-Regular.woff2',
 hmotnosť: '400',
 štýl: 'normálny',
 },
 {
 cesta: './Roboto-Italic.woff2',
 hmotnosť: '400',
 štýl: 'kurzíva',
 },
 {
 cesta: './Roboto-Bold.woff2',
 hmotnosť: '700',
 štýl: 'normálny',
 },
 {
 cesta: './Roboto-BoldItalic.woff2',
 hmotnosť: '700',
 štýl: 'kurzíva',
 },
 ]
 }
)

Použitie @next/font s Tailwind CSS

Ak chcete použiť @ďalší/font balík s Tailwind CSS, musíte použiť premenné CSS. Ak to chcete urobiť, definujte svoje písmo pomocou Google alebo miestnych písem a potom načítajte písmo s možnosťou premennej na určenie názvu premennej CSS.

Napríklad:

importovať { Inter } od„@next/font/google“
konšt inter = Inter({
 podmnožiny: ['latinsky'],
 premenná: '--font-inter',
})
exportpredvolenáfunkciuMyApp({ Component, pageProps }) {
vrátiť (
`${inter.variable} font-sans'}>

 </main>
 )
}

V bloku kódu vyššie ste vytvorili písmo, inter, a nastavte premennú na --font-inter. The className hlavného prvku sa potom nastaví na premennú font a font-sans. The medzipremenná triedy bude platiť inter písmo na stránku a font-sans class použije predvolené bezpätkové písmo.

Ďalej pridáte premennú CSS do konfiguračného súboru tailwind tailwind.config.cjs:

/** @typ {import('tailwindcss').Config}*/
modul.exports = {
 obsah: ["./index.html",
"./src/**/*.{js, ts, jsx, tsx}",],
 téma: {
 predĺžiť: {
 rodina fontov: {
 bez: ['var(--font-inter)'],
 },
 },
 },
 pluginy: [],
}

Teraz môžete použiť písmo vo svojej aplikácii pomocou font-sans trieda.

Optimalizácia písma pomocou @next/font

Balík @next/font je jednoduchý a efektívny spôsob, ako optimalizovať načítanie písma v Next.js. Tento balík zaisťuje, že sa vaše vlastné písma načítavajú efektívne, čím sa zlepšuje výkon vašich webových stránok a používateľská skúsenosť. Tento článok poskytuje informácie o tom, ako nastaviť balík @next/font a ako ho použiť vo vašej aplikácii Next.js. Výkonnosť svojich stránok môžete ďalej zlepšiť optimalizáciou obrázkov.