Saktar typsnitt ner din webbplats prestanda? Optimera teckensnittsladdningstiden för din applikation med detta paket.
Du kanske vill använda anpassade teckensnitt för att göra din Next.js-applikation mer visuellt tilltalande. Att använda anpassade typsnitt kan förbättra utseendet och känslan på din webbplats avsevärt, men det kan också bromsa webbplatsens prestanda om den inte optimeras ordentligt. De @nästa/teckensnitt paketet är en lösning på detta problem.
Paketet @next/font ger ett enkelt och effektivt sätt att optimera teckensnittsladdningen i Next.js, vilket förbättrar sidladdningstiden och den övergripande prestandan. Den här artikeln ger information om hur du använder @next/font i ditt Next.js-projekt.
Installerar paketet
Du kan installera @nästa/teckensnitt paket genom att köra följande kommando i din terminal:
npm installera @next/font
Om du använder garn kan du installera paketet genom att köra det här kommandot:
garn lägg till @next/font
Använd @next/fonten för att optimera Google Fonts
De @nästa/teckensnitt paketet optimerar användningen av Googles teckensnitt. De @nästa/teckensnitt är automatiskt värd för Google-teckensnitten på Next.js-servern så att ingen begäran skickas till Google för att få typsnitten.
För att använda ett Google-font i din applikation importerar du typsnittet som en funktion från @next/font/google in i _app.js fil i sidor katalog:
importera { Roboto } från'@next/font/google'konst roboto = Roboto({ delmängder: ["latin"] })
exporterastandardfungeraMinApp({ Komponent, pageProps }) {
lämna tillbaka (
)
}
I kodblocket ovan skapade du ett variabelt teckensnitt med hjälp av Roboto teckensnittsfunktion. De delmängd egenskapen underställer teckensnittet till enbart de latinska tecknen; om du använder ett annat språk kan du underställa teckensnittet till det språket.
Du kan också ange teckensnittets vikt tillsammans med teckensnittsstilen när du definierar teckensnittet:
konst roboto = Roboto(
{
delmängder: ["latin"],
vikt: '400',
stil: 'kursiv'
}
)
Du anger flera teckensnittsvikter och teckensnittsstilar med hjälp av matriser.
Till exempel:
konst roboto = Roboto(
{
delmängder: ["latin"],
vikt: ['400', '500', '700'],
stil: ['kursiv', 'vanligt']
}
)
Därefter kommer du att slå in dina komponenter i en huvud tagga och skicka typsnittet som en klass till huvud märka:
importera { Roboto } från'@next/font/google'konst roboto = Roboto(
{
delmängder: ["latin"],
vikt: ['400', '500', '600'],
stil: ['kursiv', 'vanligt']
}
)
exporterastandardfungeraMinApp({ Komponent, pageProps }) {
lämna tillbaka (
</main>
)
}
Om du renderar din applikation med kodblocket ovan kommer teckensnittet att tillämpas på hela din applikation. Alternativt kan du använda teckensnittet på en enda sida. För att göra detta lägger du till typsnittet på en specifik sida.
Såhär:
importera { Roboto } från'@next/font/google'konst roboto = Roboto(
{
delmängder: ["latin"],
vikt: ['400', '500', '600'],
stil: ['kursiv', 'vanligt']
}
)
exporterastandardfungeraHem() {
lämna tillbaka (Hej där!!!</p>
</div>
)
}
Använda @next/fonten för att optimera lokala teckensnitt
De @nästa/teckensnitt paketet optimerar också användningen av lokala teckensnitt. Tekniken att optimera lokala teckensnitt genom @nästa/teckensnitt paketet är ganska likt optimeringen av Google-teckensnitt, med subtila skillnader.
För att optimera lokala teckensnitt, använd localFont funktion som tillhandahålls av @nästa/teckensnitt paket. Du importerar localFont funktion från @next/font/local och definiera sedan ditt variabla teckensnitt innan med teckensnittet i din Next.js-applikation.
Såhär:
importera localFont från'@next/font/local'konst myFont = localFont({ src: './my-font.woff2' })
exporterastandardfungeraMinApp({ Komponent, pageProps }) {
lämna tillbaka (
</main>
)
}
Du definierar variabelt typsnitt mitt teckensnitt använda localFont fungera. De localFont funktion tar ett objekt som sitt argument. Objektet har en enda egenskap, src, som är inställd på filsökvägen för teckensnittsfilen i WOFF2 formatera "./my-font.woff2".
Du kan använda flera teckensnittsfiler för en enda teckensnittsfamilj. För att göra detta ställer du in src egenskap till en array som innehåller objekt med de olika typsnitten och deras egenskaper.
Till exempel:
konst myFont = localFont(
{
src: [
{
väg: './Roboto-Regular.woff2',
vikt: '400',
stil: 'vanligt',
},
{
väg: './Roboto-Italic.woff2',
vikt: '400',
stil: 'kursiv',
},
{
väg: './Roboto-Bold.woff2',
vikt: '700',
stil: 'vanligt',
},
{
väg: './Roboto-BoldItalic.woff2',
vikt: '700',
stil: 'kursiv',
},
]
}
)
Använda @next/fonten med Tailwind CSS
Att använda @nästa/teckensnitt paket med Tailwind CSS, du måste använda CSS-variabler. För att göra detta kommer du att definiera ditt teckensnitt med Google eller lokala teckensnitt och sedan ladda ditt teckensnitt med variabelalternativet för att ange CSS-variabelns namn.
Till exempel:
importera { Inter } från'@next/font/google'konst inter = Inter({
delmängder: ["latin"],
variabel: '--font-inter',
})
exporterastandardfungeraMinApp({ Komponent, pageProps }) {
lämna tillbaka (`${inter.variable} font-sans`}>
</main>
)
}
I kodblocket ovan skapade du typsnittet, mellan, och ställ in variabeln till --font-inter. De klassnamn av huvudelementet ställs sedan in på teckensnittsvariabeln och font-sans. De inter.variabel klass kommer att tillämpa inter teckensnitt till sidan och font-sans class kommer att tillämpa standardfonten sans-serif.
Därefter lägger du till CSS-variabeln till medvindskonfigurationsfilen tailwind.config.cjs:
/** @typ {import('tailwindcss').Config}*/
modul.exports = {
innehåll: ["./index.html",
"./src/**/*.{js, ts, jsx, tsx}",],
tema: {
förlänga: {
typsnittsfamilj: {
sans: ['var(--font-inter)'],
},
},
},
plugins: [],
}
Du kan nu använda teckensnittet i din applikation med hjälp av font-sans klass.
Teckensnittsoptimering Med @next/font
@next/font-paketet är ett enkelt och effektivt sätt att optimera teckensnittsladdningen i Next.js. Detta paket säkerställer att dina anpassade typsnitt laddas effektivt, vilket förbättrar din webbplats prestanda och användarupplevelse. Den här artikeln ger information om hur du konfigurerar @next/font-paketet och använder det i din Next.js-applikation. Du kan förbättra din webbplatss prestanda ytterligare genom att optimera bilder.
