Выбор шрифта напрямую влияет на читаемость, восприятие и визуальную иерархию контента. В CSS для управления шрифтами используется свойство font-family, которое позволяет указать конкретный шрифт или список шрифтов с запасными вариантами. Например: font-family: «Roboto», Arial, sans-serif;.
Чтобы текст отображался корректно на всех устройствах, важно указывать не только желаемый шрифт, но и одну или несколько системных альтернатив. Это предотвращает проблемы с загрузкой нестандартных шрифтов и улучшает производительность. Последний элемент в списке – обычно родовое семейство: serif, sans-serif, monospace.
Для подключения нестандартных шрифтов используют правило @font-face или сторонние сервисы вроде Google Fonts. В случае с @font-face необходимо указать путь к файлу и задать уникальное имя: font-family: «MyCustomFont»; в сочетании с src: url(«myfont.woff2») format(«woff2»);.
Важно учитывать поддержку форматов (.woff, .woff2, .ttf), а также оптимизировать размер шрифта, чтобы не перегружать страницу. Рекомендуется подключать только необходимые начертания (например, regular, bold) и использовать font-display: swap для снижения времени отрисовки текста.
Как задать семейство шрифтов с помощью свойства font-family
Свойство font-family позволяет указать одно или несколько семейств шрифтов, которые браузер будет использовать для отображения текста. Указывается список через запятую: от предпочтительного к запасным.
Пример:
p {
font-family: "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}Если первое семейство недоступно, браузер переходит к следующему. Последним всегда следует указывать универсальное семейство: serif, sans-serif, monospace, cursive или fantasy.
Названия шрифтов с пробелами обязательно заключать в кавычки. Имена без пробелов можно указывать без кавычек.
Чтобы обеспечить кроссбраузерную совместимость, используйте минимум три семейства: основное, резервное и универсальное.
Некорректно:
body {
font-family: Arial Helvetica sans-serif;
}Правильно:
body {
font-family: Arial, Helvetica, sans-serif;
}Важно учитывать регистр символов в названиях шрифтов и использовать точное написание, особенно при подключении веб-шрифтов через @font-face.
Подключив пользовательский шрифт, первым указывайте его название, затем резервные:
h1 {
font-family: "Open Sans", Verdana, sans-serif;
}Избегайте указания только одного шрифта – это снижает адаптивность интерфейса при отсутствии шрифта у пользователя.
Чем отличаются шрифты с засечками и без, и как это указать в CSS
Шрифты с засечками (serif) имеют декоративные элементы на концах штрихов. Эти мелкие черточки улучшают читаемость длинного текста на бумаге и при умеренном размере на экране. Классические примеры – Times New Roman, Georgia.
Шрифты без засечек (sans-serif) лишены этих элементов. Они создают более строгий и современный визуальный эффект, особенно подходят для цифровых интерфейсов и заголовков. Примеры – Arial, Helvetica, Roboto.
В CSS семейство шрифта задаётся через свойство font-family. Чтобы указать тип, используйте ключевое имя семейства:
С засечками:
font-family: 'Georgia', serif;Без засечек:
font-family: 'Arial', sans-serif;Первым указывается предпочтительный шрифт, далее – резервное семейство. Это обеспечивает корректное отображение, если основной шрифт недоступен.
Не используйте системные названия без уточнения типа семейства. Например, font-family: serif; применит шрифт по умолчанию, который может отличаться в разных браузерах и ОС.
Для строгого контроля внешнего вида – подключайте веб-шрифты через @font-face или сервисы вроде Google Fonts, но всегда указывайте fallback-семейство для надежности:
font-family: 'Merriweather', serif;Как подключить пользовательский шрифт через @font-face
@font-face позволяет использовать шрифты, которые не установлены у пользователя на устройстве. Это особенно важно для дизайнерской целостности и брендированных решений.
- Скачайте файл шрифта в формате .woff или .woff2. Эти форматы оптимальны по соотношению качества и размера.
- Сохраните файл в директории проекта, например,
/fonts/. - Добавьте правило
@font-faceв ваш CSS:
@font-face {
font-family: 'MyFont';
src: url('/fonts/myfont.woff2') format('woff2'),
url('/fonts/myfont.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}font-family– произвольное имя, по которому будет вызываться шрифт в стилях.src– пути к файлам шрифта с указанием формата. Рекомендуется указывать несколько форматов для кроссбраузерной поддержки.font-display: swap– позволяет отображать текст системным шрифтом до загрузки пользовательского, повышая скорость отрисовки.
Чтобы применить подключённый шрифт, используйте его имя в свойствах font-family:
body {
font-family: 'MyFont', sans-serif;
}Для кириллической поддержки убедитесь, что шрифт содержит необходимые глифы. Если нет, ищите версию с поддержкой расширенной кодировки (например, «Cyrillic Extended»).
Как использовать шрифты из Google Fonts в CSS
Для подключения шрифтов из Google Fonts необходимо выполнить два шага: импортировать нужный шрифт и применить его через CSS-свойство font-family.
- Перейдите на сайт fonts.google.com.
- Выберите нужный шрифт, например, Roboto.
- Кликните по кнопке «Select this style» рядом с нужным начертанием (например, 400 или 700).
- В блоке «Use on the web» скопируйте тег
<link>, начинающийся с<link href="https://fonts.googleapis.com/.... - Вставьте этот тег в
<head>вашего HTML-документа.
Пример подключения шрифта Roboto:
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
После подключения, примените шрифт в CSS:
body {
font-family: 'Roboto', sans-serif;
}
Рекомендации по использованию:
- Указывайте резервные семейства:
sans-serif,serif,monospace. - Не подключайте больше 2–3 гарнитур одновременно – это замедляет загрузку страницы.
- Используйте параметр
display=swapдля улучшения производительности и уменьшения FOUT (Flash of Unstyled Text). - При необходимости подключайте только нужные начертания и языковые подмножества, указывая их явно в URL.
Как задать размер шрифта с помощью свойства font-size
font-size определяет высоту символов текста. Единицы измерения бывают абсолютные (px, pt, cm) и относительные (em, rem, %, vw).
Для фиксированного размера чаще используют px: font-size: 16px;. Такой подход обеспечивает точный результат, но плохо масштабируется при изменении настроек браузера.
Относительные единицы масштабируются автоматически. em зависит от родительского элемента: font-size: 1.5em; увеличит размер на 150% от базового. rem ссылается на корневой элемент (html): font-size: 1.2rem; будет 1.2 × базовый размер.
Для адаптивного дизайна используют vw (проценты от ширины окна): font-size: 3vw;. Размер текста изменяется вместе с размерами экрана, но требует тестирования на разных устройствах.
Рекомендуется устанавливать базовый размер через html { font-size: 16px; }, а далее использовать rem – это упрощает масштабирование и делает дизайн предсказуемым.
Избегайте чрезмерного вложения em, чтобы избежать неожиданных значений. Используйте clamp() для гибкого размера: font-size: clamp(14px, 2vw, 18px); – текст масштабируется, но не выходит за указанные пределы.
Как задать начертание и насыщенность шрифта в CSS
Для изменения начертания и насыщенности шрифта в CSS используются свойства font-weight и font-style.
Свойство font-weight позволяет изменять толщину шрифта. Оно может принимать значения от 100 до 900, где 400 соответствует нормальному весу шрифта, а 700 – жирному. Также доступные ключевые значения: normal для обычной насыщенности и bold для жирного текста. Например, чтобы задать шрифт с весом 600, используйте:
p {
font-weight: 600;
}
Свойство font-style управляет наклоном шрифта. Оно может быть установлено в одно из значений: normal (обычное начертание), italic (курсив) или oblique (наклонный). Курсив чаще всего используется для выделения фрагментов текста, например:
p {
font-style: italic;
}
Важно помнить, что не все шрифты поддерживают изменения насыщенности и наклона. Если заданный шрифт не имеет необходимого начертания, браузер может использовать альтернативные варианты шрифта, что может привести к нежелательному эффекту. Поэтому для максимального контроля над внешним видом текста следует выбирать шрифты, поддерживающие разнообразие начертаний, или использовать web-шрифты, такие как Google Fonts.
Когда требуется более тонкая настройка начертания, можно комбинировать font-weight и font-style, чтобы добиться нужного визуального эффекта. Например, для жирного курсива:
p {
font-weight: bold;
font-style: italic;
}
Загрузка...
