Овај блог ће говорити о коришћењу ЦСС правила @фонт-фаце.
Шта је ЦСС @фонт-фаце правило?
Правило @фонт-фаце у ЦСС-у се користи за прављење прилагођених фонтова за наше пројекте. Ови фонтови се могу учитати са сервера или фонтова инсталираних у систему.
Како користити ЦСС @фонт-фаце правило?
Синтакса за коришћење ЦСС правила @фонт-фаце је поменута у наставку:
@фонт-фаце {
породица фонтова : МиНевФонт ;
срц : урл ( )
}
Правило @фонт-фаце се дефинише навођењем вредности у својству породице фонтова и сродне УРЛ адресе одакле се овај фонт налази као атрибут срц.
Пример
У доњем примеру ћемо прилагодити фонтове. Да бисте то урадили, прво преузмите фонтове из претраживача и додајте их у фасциклу свог пројекта. Такође можете користити везе ако користите фонтове са сервера.
Прво додајте ознаке <х1> и <х2>, а затим примените да бисте прилагодили фонтове за сваку од њих. Хајде да применимо горе описани сценарио у три корака.
Корак 1: Додајте елементе у ХТМЛ датотеку
У ХТМЛ-у, унутар одељка <боди>, додајте <х1> и <х2> за додавање садржаја који се односи на веб страницу:
< х2 > Добродошли у Линукхинт! < / х2 >
< х1 > Добродошли у Линукхинт! < / х1 >
Корак 2: Одредите правило @фонт-фаце у ЦСС-у
Да бисте навели правило, кључна реч „ @фонт-фаце ” се користи у ЦСС-у. Унутар његових витичастих заграда додајте својство породице фонтова и додајте име фонта као његову вредност. Затим користите својство срц да одредите УРЛ путању преузетог фонта:
@фонт-фаце {породица фонтова : мифонт ;
срц : урл ( '/фонтс/Батупхат\ Сцрипт.отф' ) ;
}
Слично томе, додаћемо још један прилагођени блок фонтова:
@фонт-фаце {породица фонтова : мифонт2 ;
срц : урл ( '/фонтс/Оливе_Вине\ ДЕМО.отф' ) ;
}
Сада примените стил на елементе <х1> и <х2>.
Стил х2 Елемент
х2 {породица фонтова : мифонт ;
фонт-сизе : 50пк ;
}
Својства примењена на елемент <х2> су објашњена у наставку:
- “ породица фонтова ” је подешен са вредношћу “ мифонт ” што смо навели у правилу @фонт-фаце.
- “ фонт-сизе ” својство поставља величину фонта на 50 пиксела.
Стил х1 Елемент
х1 {породица фонтова : мифонт2 ;
фонт-сизе : 70пк ;
боја : браон ;
}
Овде „ боја ” својство се користи за бојење фонта.
На слици испод се може видети да су ознаке <х1> и <х2> успешно стилизоване са новодекларисаним фонтовима:
Обезбедили смо метод за коришћење ЦСС правила @фонт-фаце.
Закључак
Стилови фонтова играју важну улогу у томе да било која апликација буде естетски привлачна. Наш систем има ограничене стилове фонтова, док су програмеру потребни различити фонтови да би додали улепшавање својим веб апликацијама. Да бисмо то урадили, ЦСС нам омогућава да користимо правило @фонт-фаце за додавање прилагођених фонтова. Овај чланак је демонстрирао правило @фонт-фаце помоћу којег можете прилагодити стил фонта у нашој апликацији.