Spomaľujú písma výkon vášho webu? Optimalizujte čas načítania písma vašej aplikácie pomocou tohto balíka.
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.
