Шрифтовете забавят ли работата на вашия сайт? Оптимизирайте времето за зареждане на шрифта на вашето приложение с помощта на този пакет.
Може да искате да използвате персонализирани шрифтове, за да направите вашето приложение Next.js по-привлекателно визуално. Използването на персонализирани шрифтове може значително да подобри външния вид и усещането на вашия уебсайт, но също така може да забави ефективността на сайта ви, ако не е оптимизиран правилно. The @следващ/шрифт пакетът е решение на този проблем.
Пакетът @next/font предоставя лесен и ефективен начин за оптимизиране на зареждането на шрифтове в Next.js, подобрявайки времето за зареждане на страницата и цялостната производителност. Тази статия предоставя информация как да използвате @next/font във вашия проект Next.js.
Инсталиране на пакета
Можете да инсталирате @следващ/шрифт пакет, като изпълните следната команда във вашия терминал:
npm инсталирайте @next/font
Ако използвате yarn, можете да инсталирате пакета, като изпълните тази команда:
yarn добави @next/font
Използване на @next/font за оптимизиране на Google Fonts
The @следващ/шрифт пакетът оптимизира използването на шрифтове на Google. The @следващ/шрифт автоматично хоства шрифтовете на Google на сървъра Next.js, така че да не се изпраща заявка до Google за получаване на шрифтовете.
За да използвате шрифт на Google във вашето приложение, ще импортирате шрифта като функция от @следващ/шрифт/google в _app.js файл в страници директория:
импортиране { Roboto } от„@следващ/font/google“конст roboto = Roboto({ подмножества: [латински] })
износпо подразбиранефункцияMyApp({Component, pageProps}) {
връщане (
)
}
В кодовия блок по-горе вие създадохте променлив шрифт, използвайки Робото функция за шрифт. The подмножество свойството поднастройва шрифта само на латинските знаци; ако използвате друг език, можете да поднастроите шрифта на този език.
Можете също да посочите теглото на шрифта заедно със стила на шрифта, когато дефинирате шрифта:
конст roboto = Робото(
{
подмножества: [латински],
тегло: '400',
стил: "курсив"
}
)
Вие определяте множество тегла на шрифта и стилове на шрифта с помощта на масиви.
Например:
конст roboto = Робото(
{
подмножества: [латински],
тегло: ['400', '500', '700'],
стил: ["курсив", "нормален"]
}
)
След това ще увиете вашите компоненти в a основен маркирайте и предайте шрифта като клас на основен таг:
импортиране { Roboto } от„@следващ/font/google“конст roboto = Робото(
{
подмножества: [латински],
тегло: ['400', '500', '600'],
стил: ["курсив", "нормален"]
}
)
износпо подразбиранефункцияMyApp({Component, pageProps}) {
връщане (
</main>
)
}
Изобразяването на вашето приложение с кодовия блок по-горе ще приложи шрифта към цялото ви приложение. Като алтернатива можете да приложите шрифта към една страница. За да направите това, добавяте шрифта към конкретна страница.
Така:
импортиране { Roboto } от„@следващ/font/google“конст roboto = Робото(
{
подмножества: [латински],
тегло: ['400', '500', '600'],
стил: ["курсив", "нормален"]
}
)
износпо подразбиранефункцияУ дома() {
връщане (Здравейте!!!</p>
</div>
)
}
Използване на @next/font за оптимизиране на локални шрифтове
The @следващ/шрифт пакет също оптимизира използването на локални шрифтове. Техниката за оптимизиране на локални шрифтове чрез @следващ/шрифт Пакетът е доста подобен на оптимизирането на шрифтове на Google, с фини разлики.
За да оптимизирате локалните шрифтове, използвайте localFont функция, предоставена от @следващ/шрифт пакет. Вие импортирате localFont функция от @следващ/шрифт/локален и след това дефинирайте вашия променлив шрифт преди това като използвате шрифта във вашето приложение Next.js.
Така:
импортиране localFont от'@следващ/шрифт/локален'конст myFont = localFont({ src: './my-font.woff2' })
износпо подразбиранефункцияMyApp({Component, pageProps}) {
връщане (
</main>
)
}
Вие определяте променливия шрифт myFont използвайки localFont функция. The localFont функцията приема обект като свой аргумент. Обектът има едно свойство, src, който е зададен на пътя на файла на шрифта в WOFF2 формат "./my-font.woff2".
Можете да използвате няколко файла с шрифтове за едно семейство шрифтове. За да направите това, задавате src свойство към масив, съдържащ обекти на различните шрифтове и техните свойства.
Например:
конст myFont = localFont(
{
src: [
{
път: './Roboto-Regular.woff2',
тегло: '400',
стил: "нормален",
},
{
път: './Roboto-Italic.woff2',
тегло: '400',
стил: "курсив",
},
{
път: './Roboto-Bold.woff2',
тегло: '700',
стил: "нормален",
},
{
път: './Roboto-BoldItalic.woff2',
тегло: '700',
стил: "курсив",
},
]
}
)
Използване на @next/font с CSS на Tailwind
За да използвате @следващ/шрифт пакет с Tailwind CSS, трябва да използвате CSS променливи. За да направите това, ще дефинирате шрифта си с помощта на Google или локални шрифтове и след това ще заредите шрифта си с опцията за променлива, за да посочите името на CSS променливата.
Например:
импортиране { Интер } от„@следващ/font/google“конст между = Интер({
подмножества: [латински],
променлива: '--font-inter',
})
износпо подразбиранефункцияMyApp({Component, pageProps}) {
връщане (`${inter.variable} font-sans`}>
</main>
)
}
В кодовия блок по-горе вие създадохте шрифта, между, и задайте променливата на --font-inter. The className на основния елемент след това се задава на променливата font и font-sans. The между.променлива клас ще прилага интер шрифт към страницата и font-sans клас ще приложи стандартния sans-serif шрифт.
След това добавяте CSS променливата към конфигурационния файл на tailwind tailwind.config.cjs:
/** @Тип {import('tailwindcss').Config}*/
модул.exports = {
съдържание: ["./index.html",
"./src/**/*.{js, ts, jsx, tsx}",],
тема: {
разшири: {
шрифтово семейство: {
без: ['var(--font-inter)'],
},
},
},
добавки: [],
}
Вече можете да приложите шрифта във вашето приложение, като използвате font-sans клас.
Оптимизиране на шрифтове с @next/font
Пакетът @next/font е прост и ефективен начин за оптимизиране на зареждането на шрифтове в Next.js. Този пакет гарантира, че персонализираните ви шрифтове се зареждат ефективно, подобрявайки производителността на вашия уебсайт и потребителското изживяване. Тази статия предоставя информация как да настроите пакета @next/font и да го използвате във вашето приложение Next.js. Можете допълнително да подобрите ефективността на вашия сайт чрез оптимизиране на изображения.
