Ar šriftai lėtina jūsų svetainės našumą? Optimizuokite savo programos šrifto įkėlimo laiką naudodami šį paketą.
Galbūt norėsite naudoti pasirinktinius šriftus, kad jūsų Next.js programa būtų vizualiai patrauklesnė. Naudodami pasirinktinius šriftus galite žymiai pagerinti svetainės išvaizdą ir pojūtį, tačiau taip pat gali sulėtinti svetainės našumą, jei ji netinkamai optimizuota. The @kitas/šriftas paketas yra šios problemos sprendimas.
@next/font paketas yra paprastas ir efektyvus būdas optimizuoti šriftų įkėlimą į Next.js, pagerinti puslapio įkėlimo laiką ir bendrą našumą. Šiame straipsnyje pateikiama informacija apie tai, kaip Next.js projekte naudoti @next/font.
Paketo įdiegimas
Galite įdiegti @kitas/šriftas paketą paleisdami šią komandą savo terminale:
npm įdiegti @next/font
Jei naudojate siūlą, paketą galite įdiegti vykdydami šią komandą:
verpalai pridėti @next/font
@next/font naudojimas norint optimizuoti „Google“ šriftus
The @kitas/šriftas paketas optimizuoja „Google“ šriftų naudojimą. The
@kitas/šriftas automatiškai priglobia „Google“ šriftus „Next.js“ serveryje, kad „Google“ nebūtų siunčiama jokia užklausa gauti šriftus.Norėdami savo programoje naudoti „Google“ šriftą, importuosite šriftą kaip funkciją iš @next/font/google į _app.js failą puslapių katalogas:
importuoti { Robotas } iš„@next/font/google“konst roboto = Roboto({ poaibiai: ['lotynu'] })
eksportuotinumatytasfunkcija„MyApp“.({ Komponentas, puslapio rekvizitai }) {
grąžinti (
)
}
Aukščiau esančiame kodo bloke sukūrėte kintamąjį šriftą naudodami Roboto šrifto funkcija. The poaibis ypatybė paskiria šriftą tik lotyniškais simboliais; jei naudojate kitą kalbą, galite pakeisti šriftą į tą kalbą.
Apibrėždami šriftą taip pat galite nurodyti šrifto svorį kartu su šrifto stiliumi:
konst robotas = robotas (
{
poaibiai: ['lotynu'],
svoris: '400',
stilius: "kursyvas"
}
)
Naudodami masyvus nurodote kelis šriftų svorį ir šriftų stilius.
Pavyzdžiui:
konst robotas = robotas (
{
poaibiai: ['lotynu'],
svoris: ['400', '500', '700'],
stilius: ["kursyvas", 'normalus']
}
)
Tada suvyniosite savo komponentus į a pagrindinis žymėti ir perduoti šriftą kaip klasę pagrindinis žyma:
importuoti { Robotas } iš„@next/font/google“konst robotas = robotas (
{
poaibiai: ['lotynu'],
svoris: ['400', '500', '600'],
stilius: ["kursyvas", 'normalus']
}
)
eksportuotinumatytasfunkcija„MyApp“.({ Komponentas, puslapio rekvizitai }) {
grąžinti (
</main>
)
}
Pateikus programą naudojant anksčiau pateiktą kodo bloką, šriftas bus pritaikytas visai programai. Arba galite pritaikyti šriftą vienam puslapiui. Norėdami tai padaryti, pridėkite šriftą į konkretų puslapį.
Kaip taip:
importuoti { Robotas } iš„@next/font/google“konst robotas = robotas (
{
poaibiai: ['lotynu'],
svoris: ['400', '500', '600'],
stilius: ["kursyvas", 'normalus']
}
)
eksportuotinumatytasfunkcijaNamai() {
grąžinti (Sveiki!!!</p>
</div>
)
}
@next/font naudojimas vietiniams šriftams optimizuoti
The @kitas/šriftas paketas taip pat optimizuoja vietinių šriftų naudojimą. Vietinių šriftų optimizavimo technika naudojant @kitas/šriftas paketas yra gana panašus į „Google“ šriftų optimizavimą, tačiau yra nedidelių skirtumų.
Norėdami optimizuoti vietinius šriftus, naudokite vietinis šriftas teikiama funkcija @kitas/šriftas paketą. Jūs importuojate vietinis šriftas funkcija nuo @next/font/local ir prieš tai apibrėžkite kintamąjį šriftą naudodami šriftą savo Next.js programoje.
Kaip taip:
importuoti vietinis šriftas iš„@next/font/local“konst myFont = localFont({ src: „./my-font.woff2“ })
eksportuotinumatytasfunkcija„MyApp“.({ Komponentas, puslapio rekvizitai }) {
grąžinti (
</main>
)
}
Jūs nustatote kintamąjį šriftą myFont naudojant vietinis šriftas funkcija. The vietinis šriftas funkcija kaip argumentą pasirenka objektą. Objektas turi vieną nuosavybę, src, kuris nustatytas į šrifto failo kelią WOFF2 formatu "./my-font.woff2".
Vienai šriftų šeimai galite naudoti kelis šriftų failus. Norėdami tai padaryti, turite nustatyti src nuosavybė į masyvą, kuriame yra skirtingų šriftų objektai ir jų savybės.
Pavyzdžiui:
konst myFont = localFont(
{
src: [
{
kelias: './Roboto-Regular.woff2',
svoris: '400',
stilius: 'normalus',
},
{
kelias: './Roboto-Italic.woff2',
svoris: '400',
stilius: "kursyvas",
},
{
kelias: './Roboto-Bold.woff2',
svoris: '700',
stilius: 'normalus',
},
{
kelias: './Roboto-BoldItalic.woff2',
svoris: '700',
stilius: "kursyvas",
},
]
}
)
@next/font naudojimas su Tailwind CSS
Norėdami naudoti @kitas/šriftas paketas su Tailwind CSS, reikia naudoti CSS kintamuosius. Norėdami tai padaryti, nustatysite šriftą naudodami „Google“ arba vietinius šriftus, tada įkelsite šriftą su kintamojo parinktimi, kad nurodytumėte CSS kintamojo pavadinimą.
Pavyzdžiui:
importuoti { Inter } iš„@next/font/google“konst inter = Inter({
poaibiai: ['lotynu'],
kintamasis: '--font-inter',
})
eksportuotinumatytasfunkcija„MyApp“.({ Komponentas, puslapio rekvizitai }) {
grąžinti (`${inter.variable} font-sans“.}>
</main>
)
}
Aukščiau esančiame kodo bloke sukūrėte šriftą, inter, ir nustatykite kintamąjį į --font-inter. The klasės pavadinimas tada nustatomas šrifto kintamasis ir font-sans. The tarp.kintamasis klasė taikys tarp šriftas į puslapį ir font-sans klasė taikys numatytąjį sans-serif šriftą.
Tada pridedate CSS kintamąjį į tailwind konfigūracijos failą tailwind.config.cjs:
/** @tipas {import('tailwindcss').Config}*/
modulis.exports = {
turinys: ["./index.html",
„./src/**/*.{js, ts, jsx, tsx}“,],
tema: {
pratęsti: {
šrifto šeima: {
be: ['var(--font-inter)'],
},
},
},
papildiniai: [],
}
Dabar galite taikyti šriftą savo programoje naudodami font-sans klasė.
Šrifto optimizavimas naudojant @next/font
@next/font paketas yra paprastas ir efektyvus būdas optimizuoti šriftų įkėlimą į Next.js. Šis paketas užtikrina, kad jūsų pasirinktiniai šriftai būtų įkeliami efektyviai, pagerinant jūsų svetainės našumą ir naudotojo patirtį. Šiame straipsnyje pateikiama informacija apie tai, kaip nustatyti @next/font paketą ir naudoti jį Next.js programoje. Galite dar labiau pagerinti savo svetainės našumą optimizuodami vaizdus.
