Този блог ще говори за използването на CSS правилото @font-face.
Какво е CSS @font-face правило?
Правилото @font-face в CSS се използва за създаване на персонализирани шрифтове за нашите проекти. Тези шрифтове могат да бъдат заредени от сървъра или инсталираните шрифтове на системата.
Как да използвам CSS @font-face правило?
Синтаксисът за използване на CSS правилото @font-face е споменат по-долу:
@font-face {
шрифтово семейство : MyNewFont ;
src : URL адрес ( )
}
Правилото @font-face се дефинира чрез указване на стойност в свойството font-family и свързания URL адрес, откъдето се намира този шрифт като атрибут src.
Пример
В примера по-долу ще персонализираме шрифтове. За да направите това, първо изтеглете шрифтовете от браузъра и ги добавете в папката на вашия проект. Можете също да използвате връзки, ако използвате шрифтове от сървъра.
Първо добавете тагове
и , след което приложете, за да персонализирате шрифтовете към всеки от тях. Нека приложим гореописания сценарий в три стъпки.
Стъпка 1: Добавете елементи към HTML файл
Стъпка 1: Добавете елементи към HTML файл
В HTML, в секцията
, добавете и за добавяне на съдържание, свързано с уеб страницата:
< h2 > Добре дошли в Linuxhint! < / h2 >
< h1 > Добре дошли в Linuxhint! < / h1 >
Стъпка 2: Посочете правилото @font-face в CSS
< h2 > Добре дошли в Linuxhint! < / h2 >
< h1 > Добре дошли в Linuxhint! < / h1 >
Стъпка 2: Посочете правилото @font-face в CSS
За да укажете правилото, ключовата дума „ @font-face ” се използва в CSS. В неговите къдрави скоби добавете свойството font-family и добавете името на шрифта като негова стойност. След това използвайте свойството src, за да посочите URL пътя на изтегления шрифт:
@font-face {
шрифтово семейство : myfont ;
src : URL адрес ( '/fonts/Batuphat\ Script.otf' ) ;
}
По подобен начин ще добавим друг персонализиран блок с шрифтове:
@font-face {шрифтово семейство : myfont2 ;
src : URL адрес ( '/fonts/Olive_Vine\ DEMO.otf' ) ;
}
Сега приложете стил към елементите
и .
Стил h2 Елемент
h2 {
шрифтово семейство : myfont ;
размер на шрифта : 50px ;
}
Стил h2 Елемент
h2 {шрифтово семейство : myfont ;
размер на шрифта : 50px ;
}
Свойствата, приложени към елемента
, са обяснени по-долу:
- “ шрифтово семейство ” се задава със стойността „ myfont ”, което сме декларирали в правилото @font-face.
- “ размер на шрифта ” свойството задава размера на шрифта на 50px.
Стил h1 Елемент
h1 {
шрифтово семейство : myfont2 ;
размер на шрифта : 70px ;
цвят : кафяво ;
}
Тук „ цвят ” се използва за оцветяване на шрифта.
Може да се види от предоставеното по-долу изображение, че етикетите
и са успешно стилизирани с новодекларираните шрифтове:
Осигурихме метода за използване на CSS правилото @font-face.
Заключение
Стиловете на шрифта играят важна роля, за да направят всяко приложение естетически привлекателно. Нашата система има ограничени стилове на шрифтове, докато разработчикът се нуждае от различни шрифтове, за да добави разкрасяване към своите уеб приложения. За да направим това, CSS ни позволява да използваме правилото @font-face за добавяне на персонализирани шрифтове. Тази статия демонстрира правилото @font-face, чрез което можете да персонализирате стила на шрифта в нашето приложение.