В мире веб-разработки типографика играет ключевую роль в создании привлекательного и удобного пользовательского интерфейса. Стандартные шрифты, доступные в большинстве операционных систем, зачастую не позволяют реализовать уникальный визуальный стиль. Именно здесь на помощь приходит правило @font-face в CSS, которое позволяет подключать кастомные шрифты и использовать их на веб-странице.
В этой статье мы подробно разберем синтаксис @font-face, рассмотрим обязательные и необязательные параметры, такие как font-family, src, font-weight и font-style, а также обсудим важность указания нескольких форматов шрифтов (woff2, woff, ttf, eot, svg) для обеспечения максимальной кроссбраузерной совместимости. Мы также рассмотрим примеры подключения и использования шрифтов Roboto и Lato с различными начертаниями и стилями, демонстрируя, как @font-face позволяет добиться желаемого визуального эффекта. В конце статья я также оставил вам блок бесплатных материалов для обучения разработке.
Что такое @font-face?
Кастомные шрифты позволяют придать веб-странице уникальный и стильный внешний вид. С помощью правила @font-face в CSS можно подключить любые шрифты, которые будут корректно отображаться на всех устройствах. В этой статье мы подробно рассмотрим, как использовать @font-face для подключения кастомных шрифтов, и приведём примеры его применения.
Правило @font-face позволяет определять кастомные шрифты, которые могут быть использованы в CSS-стилях. Оно указывает, где находится шрифт и как он должен использоваться на веб-странице.
Понимание принципов работы @font-face - это лишь часть большой картины веб-дизайна. Чтобы создавать действительно привлекательные и функциональные интерфейсы, необходимо глубоко знать HTML и CSS. Если вы хотите детальнее погрузиться в основы веб-разработки и узнать, как создавать красивые веб-страницы — приходите на наш большой курс HTML и CSS. На курсе 212 уроков и 19 упражнений, AI-тренажеры для безлимитной практики с кодом и задачами 24/7, решение задач с живым ревью наставника, еженедельные встречи с менторами.
Синтаксис @font-face
- font-family — задаёт имя шрифта, которое будет использоваться в CSS.
- src — указывает путь к файлу шрифта и его формат.
- font-weight — (необязательно) задаёт начертание шрифта (например, normal, bold).
- font-style — (необязательно) задаёт стиль шрифта (например, normal, italic).
Пример базового использования @font-face
В этом примере подключается шрифт OpenSans из папки fonts, и он применяется ко всему тексту на странице.
Поддержка различных форматов шрифтов
Для обеспечения кроссбраузерной совместимости рекомендуется указывать несколько форматов шрифтов. Наиболее часто используются следующие форматы:
- woff2 — наиболее предпочтительный формат для современных браузеров.
- woff — широко поддерживаемый формат.
- ttf — старый формат, поддерживается во многих браузерах.
- eot — используется в старых версиях Internet Explorer.
- svg — используется в некоторых мобильных браузерах.
Пример подключения нескольких форматов шрифта
Указание различных начертаний и стилей
Для разных начертаний (весов) и стилей шрифта (например, курсив) необходимо определить отдельные правила @font-face.
Пример определения различных начертаний и стилей
В этом примере подключаются три разных шрифта: обычный, жирный и курсив.
Подключение кастомного шрифта и его использование
Подключение шрифта с несколькими начертаниями и стилями
Использование шрифта в разных контекстах
Заключение
Освоив правило @font-face, вы получаете мощный инструмент для управления типографикой на вашем веб-сайте. Тщательный выбор шрифтов и их корректное подключение с использованием @font-face позволяют создать уникальный и запоминающийся дизайн, который будет положительно влиять на восприятие контента пользователем. Не забывайте о важности указания нескольких форматов шрифтов для обеспечения кроссбраузерной совместимости и оптимизации производительности загрузки страницы.
Использование @font-face позволяет добавить уникальности вашему сайту, но важно не забывать и про базовую структуру HTML и стилизацию CSS. Если вы только начинаете свой путь в веб-разработке, то вам необходимо освоить фундаментальные знания. На нашем курсе HTML и CSS вы изучите все необходимые инструменты для создания современных сайтов. В первых 3 модулях уже доступно бесплатное содержание — начните погружаться в мир HTML и CSS прямо сегодня.
Бесплатные полезности
1. Смотрите видео: код-ревью, собеседования и новости разработки на нашем Дзене – https://dzen.ru/purpleschool?tab=longs
2. Создайте личный план обучения и получите доступ к базе из 500+ бесплатных уроков в бесплатных картах развития на нашем сайте – https://purpleschool.ru/skills
3. Разберитесь в том, как устроен мир IT на бесплатном курсе «Основы разработки» – https://purpleschool.ru/course/code-basics