Hidastavatko kirjasimet sivustosi suorituskykyä? Optimoi sovelluksesi fonttien latausaika käyttämällä tätä pakettia.
Voit halutessasi tehdä Next.js-sovelluksestasi visuaalisesti houkuttelevamman käyttämällä mukautettuja kirjasimia. Mukautettujen fonttien käyttäminen voi parantaa merkittävästi verkkosivustosi ulkoasua ja tuntumaa, mutta se voi myös hidastaa sivustosi suorituskykyä, jos sitä ei ole optimoitu oikein. The @seuraava/fontti paketti on ratkaisu tähän ongelmaan.
@next/font-paketti tarjoaa yksinkertaisen ja tehokkaan tavan optimoida fonttien lataus Next.js: ssä, mikä parantaa sivun latausaikaa ja yleistä suorituskykyä. Tämä artikkeli sisältää tietoja @next/fontin käyttämisestä Next.js-projektissasi.
Paketin asentaminen
Voit asentaa @seuraava/fontti paketti suorittamalla seuraavan komennon terminaalissasi:
npm asennus @next/font
Jos käytät lankaa, voit asentaa paketin suorittamalla tämän komennon:
lanka lisää @seuraava/font
@next/fontin käyttäminen Google-kirjasinten optimointiin
The
@seuraava/fontti paketti optimoi Google-fonttien käytön. The @seuraava/fontti isännöi automaattisesti Google-kirjasimia Next.js-palvelimella, joten Googlelle ei lähetetä kirjasimien hankkimispyyntöä.Jos haluat käyttää Google-kirjasinta sovelluksessasi, tuo kirjasin funktiona kohteesta @next/font/google sisään _app.js tiedosto tiedostoon sivuja hakemisto:
tuonti { Roboto } alkaen'@next/font/google'konst roboto = Roboto({ osajoukkoja: ['Latina'] })
viedäoletuksenatoimintoOmaApp({ Komponentti, sivuprops }) {
palata (
)
}
Yllä olevassa koodilohkossa loit muuttuvan kirjasimen käyttämällä Roboto fonttitoiminto. The osajoukko ominaisuus alijoukkoa fontin latinalaisilla kirjaimilla; jos käytät toista kieltä, voit asettaa fontin tälle kielelle.
Voit myös määrittää fontin painon ja fontin tyylin määrittäessäsi kirjasinta:
konst roboto = Roboto(
{
osajoukot: ['Latina'],
paino: '400',
tyyli: "kursivointi"
}
)
Voit määrittää useita fontin painoja ja fonttityylejä taulukoiden avulla.
Esimerkiksi:
konst roboto = Roboto(
{
osajoukot: ['Latina'],
paino: ['400', '500', '700'],
tyyli: ["kursivointi", 'normaali']
}
)
Seuraavaksi käärit komponentit a pää tag ja välitä fontti luokkana pää tag:
tuonti { Roboto } alkaen'@next/font/google'konst roboto = Roboto(
{
osajoukot: ['Latina'],
paino: ['400', '500', '600'],
tyyli: ["kursivointi", 'normaali']
}
)
viedäoletuksenatoimintoOmaApp({ Komponentti, sivuprops }) {
palata (
</main>
)
}
Sovelluksen renderöiminen yllä olevan koodilohkon avulla käyttää kirjasinta koko sovelluksessasi. Vaihtoehtoisesti voit käyttää kirjasinta yhdelle sivulle. Voit tehdä tämän lisäämällä fontin tietylle sivulle.
Niin kuin:
tuonti { Roboto } alkaen'@next/font/google'konst roboto = Roboto(
{
osajoukot: ['Latina'],
paino: ['400', '500', '600'],
tyyli: ["kursivointi", 'normaali']
}
)
viedäoletuksenatoimintoKoti() {
palata (Moikka!!!</p>
</div>
)
}
@next/fontin käyttäminen paikallisten fonttien optimointiin
The @seuraava/fontti paketti optimoi myös paikallisten fonttien käytön. Tekniikka optimoida paikallisia fontteja @seuraava/fontti paketti on melko samanlainen kuin Google-fonttien optimointi, mutta siinä on pieniä eroja.
Paikallisten fonttien optimoimiseksi käytä paikallinen fontti tarjoama toiminto @seuraava/fontti paketti. Tuot paikallinen fontti toiminto alkaen @next/font/local ja määritä sitten muuttuva fontti ennen käyttämällä fonttia Next.js-sovelluksessasi.
Niin kuin:
tuonti paikallinen fontti alkaen'@seuraava/font/local'konst myFont = localFont({ src: './my-font.woff2' })
viedäoletuksenatoimintoOmaApp({ Komponentti, sivuprops }) {
palata (
</main>
)
}
Voit määrittää muuttujan fontin myFont käyttämällä paikallinen fontti toiminto. The paikallinen fontti funktio ottaa argumentiksi objektin. Objektilla on yksi ominaisuus, src, joka on asetettu kirjasintiedoston tiedostopolulle WOFF2 muoto "./my-font.woff2".
Voit käyttää useita kirjasintiedostoja yhdelle kirjasinperheelle. Voit tehdä tämän määrittämällä src ominaisuus taulukkoon, joka sisältää eri fonttien objekteja ja niiden ominaisuuksia.
Esimerkiksi:
konst myFont = localFont(
{
src: [
{
polku: './Roboto-Regular.woff2',
paino: '400',
tyyli: 'normaali',
},
{
polku: './Roboto-Italic.woff2',
paino: '400',
tyyli: "kursivointi",
},
{
polku: './Roboto-Bold.woff2',
paino: '700',
tyyli: 'normaali',
},
{
polku: './Roboto-BoldItalic.woff2',
paino: '700',
tyyli: "kursivointi",
},
]
}
)
@next/fontin käyttäminen Tailwind CSS: n kanssa
Käyttääksesi @seuraava/fontti paketti Tailwind CSS: llä, sinun on käytettävä CSS-muuttujia. Voit tehdä tämän määrittämällä kirjasimen Googlen tai paikallisten kirjasimien avulla ja lataamalla sitten fontin muuttujavaihtoehdolla määrittääksesi CSS-muuttujan nimen.
Esimerkiksi:
tuonti { Inter } alkaen'@next/font/google'konst inter = Inter({
osajoukot: ['Latina'],
muuttuja: '--font-inter',
})
viedäoletuksenatoimintoOmaApp({ Komponentti, sivuprops }) {
palata (`${inter.variable} font-sans'}>
</main>
)
}
Yllä olevaan koodilohkoon loit fontin, inter, ja aseta muuttuja arvoon --font-inter. The luokan nimi pääelementin arvoksi asetetaan sitten fonttimuuttuja ja font-sans. The inter.muuttuja luokka soveltaa inter fontti sivulle ja font-sans luokka käyttää oletusarvoista sans-serif-fonttia.
Seuraavaksi lisäät CSS-muuttujan myötätuulen määritystiedostoon tailwind.config.cjs:
/** @tyyppi {import('tailwindcss').Config}*/
moduuli.exports = {
sisältö: ["./index.html",
"./src/**/*.{js, ts, jsx, tsx}",],
teema: {
laajentaa: {
fontFamily: {
ilman: ['var(--font-inter)'],
},
},
},
laajennukset: [],
}
Voit nyt käyttää fonttia sovelluksessasi käyttämällä font-sans luokkaa.
Fontin optimointi @next/fontilla
@next/font-paketti on yksinkertainen ja tehokas tapa optimoida fonttien lataus Next.js: ssä. Tämä paketti varmistaa, että mukautetut fontit latautuvat tehokkaasti, mikä parantaa verkkosivustosi suorituskykyä ja käyttökokemusta. Tämä artikkeli sisältää tietoja @next/font-paketin määrittämisestä ja sen käyttämisestä Next.js-sovelluksessasi. Voit parantaa sivustosi suorituskykyä entisestään optimoimalla kuvia.