Да ли фонтови успоравају перформансе ваше веб локације? Оптимизујте време учитавања фонта ваше апликације помоћу овог пакета.
Можда ћете желети да користите прилагођене фонтове како бисте своју Нект.јс апликацију учинили визуелно привлачнијом. Коришћење прилагођених фонтова може значајно побољшати изглед и осећај ваше веб локације, али такође може успорити перформансе ваше веб локације ако није правилно оптимизовано. Тхе @нект/фонт пакет је решење за овај проблем.
Пакет @нект/фонт пружа једноставан и ефикасан начин за оптимизацију учитавања фонтова у Нект.јс, побољшавајући време учитавања странице и укупне перформансе. Овај чланак пружа информације о томе како да користите @нект/фонт у свом Нект.јс пројекту.
Инсталирање пакета
Можете инсталирати @нект/фонт пакет тако што ћете покренути следећу команду у свом терминалу:
нпм инсталл @нект/фонт
Ако користите иарн, можете инсталирати пакет тако што ћете покренути ову команду:
предиво додати @нект/фонт
Коришћење @нект/фонт за оптимизацију Гоогле фонтова
Тхе @нект/фонт пакет оптимизује употребу Гоогле фонтова. Тхе @нект/фонт аутоматски самостално хостује Гоогле фонтове на Нект.јс серверу тако да се Гоогле-у не шаље захтев за добијање фонтова.
Да бисте користили Гоогле фонт у својој апликацији, увезћете фонт као функцију из @нект/фонт/гоогле Инто тхе _апп.јс фајл у странице директоријум:
увоз { Робото } из'@нект/фонт/гоогле'конст робот = Робото({ подскупови: ['латиница'] })
извозУобичајенофункцијаМиАпп({ Компонента, пагеПропс }) {
повратак (
)
}
У блоку кода изнад, креирали сте променљиви фонт користећи Робото функција фонта. Тхе подсет својство подскупљује фонт само на латиничне знакове; ако користите други језик, можете подесити фонт на тај језик.
Такође можете одредити тежину фонта заједно са стилом фонта када дефинишете фонт:
конст робот = Робото(
{
подскупови: ['латиница'],
тежина: '400',
стил: 'курзив'
}
)
Наводите вишеструку тежину фонта и стилове фонта користећи низове.
На пример:
конст робот = Робото(
{
подскупови: ['латиница'],
тежина: ['400', '500', '700'],
стил: ['курзив', 'нормално']
}
)
Затим ћете умотати своје компоненте у а главни означите и проследите фонт као класу у главни ознака:
увоз { Робото } из'@нект/фонт/гоогле'конст робот = Робото(
{
подскупови: ['латиница'],
тежина: ['400', '500', '600'],
стил: ['курзив', 'нормално']
}
)
извозУобичајенофункцијаМиАпп({ Компонента, пагеПропс }) {
повратак (
</main>
)
}
Приказивање ваше апликације са блоком кода изнад ће применити фонт на целу апликацију. Алтернативно, можете применити фонт на једну страницу. Да бисте то урадили, додајте фонт на одређену страницу.
Овако:
увоз { Робото } из'@нект/фонт/гоогле'конст робот = Робото(
{
подскупови: ['латиница'],
тежина: ['400', '500', '600'],
стил: ['курзив', 'нормално']
}
)
извозУобичајенофункцијаКућа() {
повратак (Здраво!!!</p>
</div>
)
}
Коришћење @нект/фонт за оптимизацију локалних фонтова
Тхе @нект/фонт пакет такође оптимизује употребу локалних фонтова. Техника оптимизације локалних фонтова кроз @нект/фонт пакет је прилично сличан оптимизацији Гоогле фонтова, са суптилним разликама.
Да бисте оптимизовали локалне фонтове, користите лоцалФонт функцију коју обезбеђује @нект/фонт пакет. Ви увозите лоцалФонт функција од @нект/фонт/лоцал а затим дефинишите свој променљиви фонт пре користећи фонт у вашој Нект.јс апликацији.
Овако:
увоз лоцалФонт из'@нект/фонт/лоцал'конст миФонт = лоцалФонт({ срц: './ми-фонт.вофф2' })
извозУобичајенофункцијаМиАпп({ Компонента, пагеПропс }) {
повратак (
</main>
)
}
Ви дефинишете променљиви фонт миФонт помоћу лоцалФонт функција. Тхе лоцалФонт функција узима објекат као свој аргумент. Објекат има једно својство, срц, који је постављен на путању датотеке датотеке фонта у ВОФФ2 формату "./ми-фонт.вофф2".
Можете користити више датотека фонтова за једну породицу фонтова. Да бисте то урадили, подесите срц својства на низ који садржи објекте различитих фонтова и њихова својства.
На пример:
конст миФонт = лоцалФонт(
{
срц: [
{
пут: './Робото-Регулар.вофф2',
тежина: '400',
стил: 'нормално',
},
{
пут: './Робото-Италиц.вофф2',
тежина: '400',
стил: 'курзив',
},
{
пут: './Робото-Болд.вофф2',
тежина: '700',
стил: 'нормално',
},
{
пут: './Робото-БолдИталиц.вофф2',
тежина: '700',
стил: 'курзив',
},
]
}
)
Коришћење @нект/фонт са Таилвинд ЦСС-ом
Да бисте користили @нект/фонт пакет са Таилвинд ЦСС, потребно је да користите ЦСС променљиве. Да бисте то урадили, дефинисаћете свој фонт користећи Гоогле или локалне фонтове, а затим учитати свој фонт опцијом променљиве да бисте навели име ЦСС променљиве.
На пример:
увоз { Између } из'@нект/фонт/гоогле'конст интер = Интер({
подскупови: ['латиница'],
променљива: '--фонт-интер',
})
извозУобичајенофункцијаМиАпп({ Компонента, пагеПропс }) {
повратак (`${интер.вариабле} фонт-санс`}>
</main>
)
}
У блоку кода изнад, креирали сте фонт, између, и поставите променљиву на --фонт-интер. Тхе Назив класе главног елемента се затим поставља на променљиву фонта и фонт-санс. Тхе интер.варијабле разред ће применити између фонт на страници и фонт-санс цласс ће применити подразумевани санс-сериф фонт.
Затим додајете ЦСС променљиву у конфигурациону датотеку таилвинд таилвинд.цонфиг.цјс:
/** @тип {импорт('таилвиндцсс').Цонфиг}*/
модул.екпортс = {
садржај: ["./индек.хтмл",
„./срц/**/*.{јс, тс, јск, тск}“,],
тема: {
проширити: {
породица фонтова: {
санс: ['вар(--фонт-интер)'],
},
},
},
додаци: [],
}
Сада можете да примените фонт у својој апликацији користећи фонт-санс класа.
Оптимизација фонта са @нект/фонт
Пакет @нект/фонт је једноставан и ефикасан начин за оптимизацију учитавања фонтова у Нект.јс. Овај пакет осигурава да се ваши прилагођени фонтови ефикасно учитавају, побољшавајући перформансе ваше веб странице и корисничко искуство. Овај чланак пружа информације о томе како да подесите пакет @нект/фонт и да га користите у апликацији Нект.јс. Можете додатно побољшати перформансе своје веб локације тако што ћете оптимизовати слике.