Vertraagt het gebruik van lettertypen de prestaties van uw site? Optimaliseer de laadtijd van lettertypen van uw toepassing met dit pakket.
Misschien wilt u aangepaste lettertypen gebruiken om uw Next.js-toepassing visueel aantrekkelijker te maken. Het gebruik van aangepaste lettertypen kan het uiterlijk van uw website aanzienlijk verbeteren, maar het kan ook de prestaties van uw site vertragen als deze niet correct zijn geoptimaliseerd. De @volgende/lettertype pakket is een oplossing voor dit probleem.
Het pakket @next/font biedt een eenvoudige en efficiënte manier om het laden van lettertypen in Next.js te optimaliseren, waardoor de laadtijd van pagina's en de algehele prestaties worden verbeterd. Dit artikel bevat informatie over het gebruik van @next/font in uw Next.js-project.
Het pakket installeren
U kunt de @volgende/lettertype package door de volgende opdracht in uw terminal uit te voeren:
npm installeer @next/font
Als u garen gebruikt, kunt u het pakket installeren door deze opdracht uit te voeren:
garen voeg @next/font toe
De @next/font gebruiken om Google Fonts te optimaliseren
De @volgende/lettertype pakket optimaliseert het gebruik van Google-lettertypen. De @volgende/lettertype host automatisch de Google-lettertypen op de Next.js-server, zodat er geen verzoek naar Google wordt verzonden om de lettertypen op te halen.
Om een Google-lettertype in uw toepassing te gebruiken, importeert u het lettertype als een functie uit @next/lettertype/google in de _app.js bestand in de Pagina's map:
importeren { Roboto } van'@next/lettertype/google'const roboto = roboto({ subsets: ['Latijns'] })
exporterenstandaardfunctieMijnApp({ Component, paginaProps }) {
opbrengst (
)
}
In het bovenstaande codeblok hebt u een variabel lettertype gemaakt met behulp van de robot lettertype functie. De subgroep eigenschap stelt het lettertype alleen in op de Latijnse tekens; als u een andere taal gebruikt, kunt u het lettertype subsetten naar die taal.
U kunt bij het definiëren van het lettertype ook het lettertypegewicht en de lettertypestijl opgeven:
const roboto = roboto(
{
deelverzamelingen: ['Latijns'],
gewicht: '400',
stijl: 'cursief'
}
)
U specificeert meerdere lettertypegewichten en lettertypestijlen met behulp van arrays.
Bijvoorbeeld:
const roboto = roboto(
{
deelverzamelingen: ['Latijns'],
gewicht: ['400', '500', '700'],
stijl: ['cursief', 'normaal']
}
)
Vervolgens wikkel je je componenten in een voornaamst tag en geef het lettertype als een klasse door aan de voornaamst label:
importeren { Roboto } van'@next/lettertype/google'const roboto = roboto(
{
deelverzamelingen: ['Latijns'],
gewicht: ['400', '500', '600'],
stijl: ['cursief', 'normaal']
}
)
exporterenstandaardfunctieMijnApp({ Component, paginaProps }) {
opbrengst (
</main>
)
}
Als u uw applicatie rendert met het bovenstaande codeblok, wordt het lettertype toegepast op uw hele applicatie. U kunt het lettertype ook op één pagina toepassen. Hiervoor voeg je het lettertype toe aan een specifieke pagina.
Zoals zo:
importeren { Roboto } van'@next/lettertype/google'const roboto = roboto(
{
deelverzamelingen: ['Latijns'],
gewicht: ['400', '500', '600'],
stijl: ['cursief', 'normaal']
}
)
exporterenstandaardfunctieThuis() {
opbrengst (Hallo daar!!!</p>
</div>
)
}
De @next/font gebruiken om lokale lettertypen te optimaliseren
De @volgende/lettertype pakket optimaliseert ook het gebruik van lokale lettertypen. De techniek van het optimaliseren van lokale lettertypen via de @volgende/lettertype pakket lijkt veel op de optimalisatie van Google-lettertypen, met subtiele verschillen.
Gebruik de lokaal lettertype functie van de @volgende/lettertype pakket. Je importeert de lokaal lettertype functie van @next/lettertype/lokaal en definieer vervolgens uw variabele lettertype ervoor met behulp van het lettertype in uw Next.js-toepassing.
Zoals zo:
importeren lokaal lettertype van'@next/lettertype/lokaal'const mijnlettertype = lokaallettertype({ src: './mijn-lettertype.woff2' })
exporterenstandaardfunctieMijnApp({ Component, paginaProps }) {
opbrengst (
</main>
)
}
U definieert het variabele lettertype mijnFont de... gebruiken lokaal lettertype functie. De lokaal lettertype functie neemt een object als argument. Het object heeft een enkele eigenschap, src, die is ingesteld op het bestandspad van het lettertypebestand in de WOFF2 formaat "./mijn-lettertype.woff2".
U kunt meerdere lettertypebestanden gebruiken voor één lettertypefamilie. Hiervoor stel je de src eigenschap toe aan een array met objecten van de verschillende lettertypen en hun eigenschappen.
Bijvoorbeeld:
const mijnlettertype = lokaallettertype(
{
src: [
{
pad: './Roboto-Regular.woff2',
gewicht: '400',
stijl: 'normaal',
},
{
pad: './Roboto-Italic.woff2',
gewicht: '400',
stijl: 'cursief',
},
{
pad: './Roboto-Bold.woff2',
gewicht: '700',
stijl: 'normaal',
},
{
pad: './Roboto-BoldItalic.woff2',
gewicht: '700',
stijl: 'cursief',
},
]
}
)
De @next/font gebruiken met Tailwind CSS
Om de @volgende/lettertype pakket met Tailwind CSS, je moet CSS-variabelen gebruiken. Om dit te doen, definieert u uw lettertype met behulp van Google of lokale lettertypen en laadt u vervolgens uw lettertype met de variabeleoptie om de naam van de CSS-variabele op te geven.
Bijvoorbeeld:
importeren { Inter } van'@next/lettertype/google'const inter = inter({
deelverzamelingen: ['Latijns'],
variabele: '--font-inter',
})
exporterenstandaardfunctieMijnApp({ Component, paginaProps }) {
opbrengst (`${inter.variabele} font-sans`}>
</main>
)
}
In het bovenstaande codeblok heb je het lettertype gemaakt, onder, en zet de variabele op --lettertype-inter. De naam van de klasse van het hoofdelement wordt dan ingesteld op de lettertypevariabele en font-sans. De inter.variabele klasse past de onder lettertype naar de pagina, en het font-sans class past het standaard sans-serif-lettertype toe.
Vervolgens voeg je de CSS-variabele toe aan het tailwind-configuratiebestand staartwind.config.cjs:
/** @type {import('tailwindcss').Config}*/
moduul.export = {
inhoud: ["./index.html",
"./src/**/*.{js, ts, jsx, tsx}",],
thema: {
verlengen: {
fontFamilie: {
zonder: ['var(-lettertype-inter)'],
},
},
},
plug-ins: [],
}
U kunt het lettertype nu toepassen in uw toepassing met behulp van de font-sans klas.
Lettertypeoptimalisatie met @next/font
Het pakket @next/font is een eenvoudige en effectieve manier om het laden van lettertypen in Next.js te optimaliseren. Dit pakket zorgt ervoor dat uw aangepaste lettertypen efficiënt worden geladen, waardoor de prestaties en gebruikerservaring van uw website worden verbeterd. Dit artikel bevat informatie over het instellen van het @next/font-pakket en het gebruik ervan in uw Next.js-toepassing. U kunt de prestaties van uw site verder verbeteren door afbeeldingen te optimaliseren.