Веб фонтови су одличан начин да додате прилагођене фонтове вашој веб локацији. Ови фонтови можда нису доступни на корисничком систему, тако да морате да их укључите у свој пројекат тако што ћете их хостовати или референцирати преко ЦДН-а.
Научите како да укључите веб фонтове у Нект.јс веб локацију користећи ове две методе.
Коришћење фонтова који се сами хостују у Нект.јс
Да бисте додали фонтове које хостује сами у Нект.јс, потребно је користите ЦСС правило @фонт-фаце. Ово правило вам омогућава да додате прилагођене фонтове на веб страницу.
Пре коришћења фонт-фаце, морате преузети фонтове које желите да користите. Има их много сајтови на интернету који нуде бесплатне фонтове, укључујући веб локације Гоогле фонтове, простор за фонтове и дафонт.
Када преузмете веб фонтове, конвертујте их у различите формате фонтова да бисте подржали више прегледача. Можете користити бесплатни алати за конверзију фонтова на мрежи урадити тако. Модерни веб претраживачи подржавају .вофф и .вофф2 формате. Ако треба да подржавате старе претраживаче, требало би да обезбедите и .еот и .ттф формате.
Креирајте нову фасциклу под називом фонтове у директоријуму вашег сајта и тамо сачувајте своје конвертоване датотеке фонтова.
Следећи корак је да укључите лица фонта у стилес/глобал.цсс датотеку како би били доступни целој веб локацији. Овај пример приказује лица фонта за фонт сирена подебљаним:
@фонт-фаце {
породица фонтова: 'сирена';
срц: урл('Мермаид-Болд.еот');
срц: урл('Мермаид-Болд.еот?#иефик') формат ('ембеддед-опентипе'),
урл('Мермаид-Болд.вофф2') формат ('вофф2'),
урл('Мермаид-Болд.вофф') формат ('вофф'),
урл('Мермаид-Болд.ттф') формат ('труетипе');
фонт-веигхт: болд;
фонт-стиле: нормалан;
фонт-дисплаи: свап;
}
Када укључите датотеке фонтова, можете користити те фонтове у ЦСС датотеци на нивоу компоненте:
х1 {
фонт-фамили: Мермаид;
}Укључујући веб фонтове у Нект.јс преко ЦДН-а
Неке веб локације служе веб фонтове преко ЦДН-а које можете да увезете у своју апликацију. Овај приступ је лако подесити јер не морате да преузимате фонтове или креирате фонтове. Поред тога, ако користите Гоогле фонтове или ТипеКит, Нект.јс аутоматски управља оптимизацијом.
Можете додати фонтове из ЦДН-а помоћу ознаке везе или правила @импорт унутар ЦСС датотеке.
Ознака везе увек иде унутар ознаке хеад ХТМЛ документа. Да бисте додали ознаку главе у Нект.јс, морате да креирате прилагођени документ. Овај документ мења ознаку хеад и боди која се користи за приказивање сваке странице.
Почните да користите ову прилагођену функцију документа креирањем датотеке /pages/_document.js.
Затим укључите везу до фонта у заглављу датотеке _доцумент.јс.
увоз Документ, { Хтмл, Хеад, Маин, НектСцрипт} из "следећи/документ";
класаМиДоцументпротежеДокумент{
статичнеасинц гетИнитиалПропс (цтк) {
конст инитиалПропс = чекати Доцумент.гетИнитиалПропс (цтк);
повратак { ...инитиалПропс };
}
дати, пружити() {
повратак (
<Хтмл>
<Глава>
<линк
хреф="https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&дисплаи=свап"
рел="стилесхеет"
/>
</Head>
<тело>
<Главни />
<НектСцрипт />
</body>
</Html>
);
}
}
извозУобичајено МиДоцумент;Како да користите правило @импорт за укључивање фонтова у пројекат Нект.јс
Друга опција је да користите правило @импорт у ЦСС датотеци за коју желите да користите фонт.
На пример, учините фонт доступним у целом пројекту тако што ћете увести веб фонт у стилес/глобал.цсс фајл.
@импорт УРЛ('https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&дисплаи=свап');
Сада можете референцирати породицу фонтова у а ЦСС селектор овако:
х1 {
породица фонтова:'Бесплатно дисплеј Цаслон', сериф;
}Правило @импорт вам омогућава да увезете фонт у садржану ЦСС датотеку. Коришћење ознаке везе чини фонт доступним на целој веб локацији.
Да ли треба да хостујете фонтове локално или да их увезете преко ЦДН-а?
Фонтови хостовани локално су обично бржи од фонтова увезених са ЦДН-а. То је зато што прегледач не мора да поставља додатни захтев за ЦДН фонт након што се веб страница учита.
Ако желите да користите увезене фонтове, унапред их учитајте да бисте побољшали перформансе сајта. Ако су фонтови доступни у Гоогле фонтовима или Типекит-у, можете да их увезете и искористите предности оптимизацијских функција Нект.јс.
