Sænker skrifttyper dit websteds ydeevne? Optimer skrifttypeindlæsningstiden for din applikation ved hjælp af denne pakke.
Du vil måske bruge tilpassede skrifttyper til at gøre din Next.js-applikation mere visuelt tiltalende. Brug af tilpassede skrifttyper kan forbedre udseendet og fornemmelsen af dit websted betydeligt, men det kan også bremse dit websteds ydeevne, hvis det ikke er optimeret korrekt. Det @næste/skrifttype pakken er en løsning på dette problem.
@next/font-pakken giver en enkel og effektiv måde at optimere skrifttypeindlæsning i Next.js, hvilket forbedrer sideindlæsningstid og overordnet ydeevne. Denne artikel indeholder oplysninger om, hvordan du bruger @next/font i dit Next.js-projekt.
Installation af pakken
Du kan installere @næste/skrifttype pakke ved at køre følgende kommando i din terminal:
npm installer @next/font
Hvis du bruger garn, kan du installere pakken ved at køre denne kommando:
garn tilføje @next/font
Brug af @next/fonten til at optimere Google-skrifttyper
Det
@næste/skrifttype pakke optimerer brugen af Google-skrifttyper. Det @næste/skrifttype hoster automatisk Google-skrifttyperne på Next.js-serveren, så der ikke sendes nogen anmodning til Google om at få skrifttyperne.For at bruge en Google-skrifttype i din applikation, vil du importere skrifttypen som en funktion fra @next/font/google ind i _app.js fil i sider vejviser:
importere { Roboto } fra'@next/font/google'konst roboto = Roboto({ delmængder: ['latin'] })
eksportStandardfungereMinApp({ Komponent, pageProps }) {
Vend tilbage (
)
}
I kodeblokken ovenfor oprettede du en variabel skrifttype ved hjælp af Roboto skrifttype funktion. Det delmængde egenskaben undersætter skrifttypen til de latinske tegn alene; hvis du bruger et andet sprog, kan du underindstille skrifttypen til det sprog.
Du kan også angive skrifttypevægten sammen med skrifttypestilen, når du definerer skrifttypen:
konst roboto = Roboto(
{
delmængder: ['latin'],
vægt: '400',
stil: 'kursiv'
}
)
Du angiver flere skrifttypevægte og skrifttyper ved hjælp af arrays.
For eksempel:
konst roboto = Roboto(
{
delmængder: ['latin'],
vægt: ['400', '500', '700'],
stil: ['kursiv', 'normal']
}
)
Dernæst vil du pakke dine komponenter ind i en vigtigste tag og send skrifttypen som en klasse til vigtigste tag:
importere { Roboto } fra'@next/font/google'konst roboto = Roboto(
{
delmængder: ['latin'],
vægt: ['400', '500', '600'],
stil: ['kursiv', 'normal']
}
)
eksportStandardfungereMinApp({ Komponent, pageProps }) {
Vend tilbage (
</main>
)
}
Gengivelse af din applikation med kodeblokken ovenfor vil anvende skrifttypen på hele din applikation. Alternativt kan du anvende skrifttypen på en enkelt side. For at gøre dette skal du tilføje skrifttypen til en bestemt side.
Ligesom:
importere { Roboto } fra'@next/font/google'konst roboto = Roboto(
{
delmængder: ['latin'],
vægt: ['400', '500', '600'],
stil: ['kursiv', 'normal']
}
)
eksportStandardfungereHjem() {
Vend tilbage (Hej med dig!!!</p>
</div>
)
}
Brug af @next/fonten til at optimere lokale skrifttyper
Det @næste/skrifttype pakken optimerer også brugen af lokale skrifttyper. Teknikken til at optimere lokale skrifttyper gennem @næste/skrifttype pakken er ret lig optimering af Google-skrifttyper, med subtile forskelle.
For at optimere lokale skrifttyper skal du bruge localFont funktion leveret af @næste/skrifttype pakke. Du importerer localFont funktion fra @next/font/local og derefter definere din variable skrifttype før ved at bruge skrifttypen i din Next.js-applikation.
Ligesom:
importere localFont fra'@next/font/local'konst minFont = lokalFont({ src: './my-font.woff2' })
eksportStandardfungereMinApp({ Komponent, pageProps }) {
Vend tilbage (
</main>
)
}
Du definerer den variable skrifttype min skrifttype bruger localFont fungere. Det localFont funktion tager et objekt som sit argument. Objektet har en enkelt egenskab, src, som er indstillet til filstien til fontfilen i WOFF2 format "./my-font.woff2".
Du kan bruge flere skrifttypefiler til en enkelt skrifttypefamilie. For at gøre dette skal du indstille src egenskab til et array, der indeholder objekter med de forskellige skrifttyper og deres egenskaber.
For eksempel:
konst minFont = lokalFont(
{
src: [
{
sti: './Roboto-Regular.woff2',
vægt: '400',
stil: 'normal',
},
{
sti: './Roboto-Italic.woff2',
vægt: '400',
stil: 'kursiv',
},
{
sti: './Roboto-Bold.woff2',
vægt: '700',
stil: 'normal',
},
{
sti: './Roboto-BoldItalic.woff2',
vægt: '700',
stil: 'kursiv',
},
]
}
)
Brug af @next/fonten med Tailwind CSS
For at bruge @næste/skrifttype pakke med Tailwind CSS, du skal bruge CSS-variabler. For at gøre dette skal du definere din skrifttype ved hjælp af Google eller lokale skrifttyper og derefter indlæse din skrifttype med variabelindstillingen for at angive CSS-variabelnavnet.
For eksempel:
importere { Inter } fra'@next/font/google'konst inter = Inter({
delmængder: ['latin'],
variabel: '--font-inter',
})
eksportStandardfungereMinApp({ Komponent, pageProps }) {
Vend tilbage (`${inter.variable} font-sans`}>
</main>
)
}
I kodeblokken ovenfor oprettede du skrifttypen, mellem, og sæt variablen til --font-inter. Det klassenavn af hovedelementet sættes derefter til skrifttypevariablen og font-sans. Det inter.variabel klasse vil anvende inter skrifttype til siden, og font-sans klasse anvender standard sans-serif-skrifttypen.
Dernæst tilføjer du CSS-variablen til medvindskonfigurationsfilen tailwind.config.cjs:
/** @type {import('tailwindcss').Config}*/
modul.exports = {
indhold: ["./index.html",
"./src/**/*.{js, ts, jsx, tsx}",],
tema: {
forlænge: {
fontFamily: {
sans: ['var(--font-inter)'],
},
},
},
plugins: [],
}
Du kan nu anvende skrifttypen i din applikation ved hjælp af font-sans klasse.
Skrifttypeoptimering Med @next/font
@next/font-pakken er en enkel og effektiv måde at optimere skrifttypeindlæsning i Next.js. Denne pakke sikrer, at dine tilpassede skrifttyper indlæses effektivt, hvilket forbedrer dit websteds ydeevne og brugeroplevelse. Denne artikel indeholder oplysninger om, hvordan du konfigurerer @next/font-pakken og bruger den i din Next.js-applikation. Du kan forbedre dit websteds ydeevne yderligere ved at optimere billeder.
