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