В HTML внешний вид текста напрямую зависит от указанных параметров шрифта. Базовый способ управления осуществляется через CSS-свойство font-family, которое задаёт список шрифтов. Например: p { font-family: Arial, sans-serif; }. Важно указывать несколько вариантов через запятую, чтобы браузер смог выбрать доступный на устройстве пользователя.
Для изменения размера текста применяется свойство font-size. Оно поддерживает пиксели, проценты, относительные единицы (em, rem) и ключевые слова вроде small или large. Оптимально использовать относительные единицы, так как они адаптируются к настройкам браузера и позволяют сохранять удобочитаемость на разных экранах.
Дополнительно можно управлять насыщенностью (font-weight), стилем (font-style) и межстрочным интервалом (line-height). Эти параметры задаются вместе с font-family для формирования читаемого и единообразного оформления текста.
При необходимости подключения нестандартных гарнитур используется правило @font-face. Оно позволяет загрузить шрифт с сервера и использовать его в коде. Однако важно учитывать лицензионные ограничения и производительность: тяжелые файлы шрифтов могут замедлить загрузку страницы.
Использование атрибута style для изменения font-family
Атрибут style позволяет задать шрифт напрямую для конкретного элемента. Для этого используется свойство font-family с указанием одного или нескольких названий шрифтов через запятую.
Пример: <p style="font-family: Arial, Helvetica, sans-serif;">Текст с выбранным шрифтом</p>
При указании нескольких шрифтов браузер применяет первый доступный. В примере выше, если Arial отсутствует, будет использован Helvetica, а при его отсутствии – системный шрифт категории sans-serif.
Рекомендуется указывать как минимум один запасной шрифт, чтобы текст корректно отображался на разных устройствах.
Применение CSS-свойства font-size к тексту
Свойство font-size определяет размер шрифта элемента. Его можно задавать в абсолютных и относительных единицах. Абсолютные значения фиксированы, относительные зависят от контекста или размеров контейнера.
Основные варианты единиц измерения:
| Единица | Описание | Пример |
|---|---|---|
| px | Пиксели, точный размер, не зависит от настроек браузера | font-size: 16px; |
| em | Относительно размера шрифта родителя | font-size: 1.2em; |
| rem | Относительно размера шрифта элемента <html> |
font-size: 1rem; |
| % | Процент от размера шрифта родителя | font-size: 120%; |
| vw / vh | Зависимость от ширины или высоты окна браузера | font-size: 2vw; |
Для основного текста рекомендуется использовать относительные единицы (em, rem), так как они учитывают масштабирование и настройки доступности. Абсолютные пиксели уместны для мелких элементов интерфейса, где требуется строгая фиксация размеров.
Пример комбинированного использования:
body {
font-size: 16px;
}
h1 {
font-size: 2rem;
}
p {
font-size: 1em;
}
Изменение толщины текста с помощью font-weight
Свойство font-weight управляет насыщенностью шрифта. Значение может быть числовым (100–900 с шагом 100) или ключевым (normal, bold, lighter, bolder).
normal соответствует значению 400, bold – 700. Например, font-weight: 600; делает текст полужирным, но мягче, чем bold. Минимальное значение 100 используется для очень тонких шрифтов, 900 – для максимально плотных.
Поддержка всех промежуточных значений зависит от выбранного шрифта. Если в гарнитуре нет конкретной насыщенности, браузер подберёт ближайшую доступную.
Пример использования:
p {
font-weight: 300;
}
h1 {
font-weight: 800;
}Для заголовков уместно использовать 600–900, для основного текста – 300–400, чтобы сохранить читаемость.
Настройка начертания текста через font-style
Свойство font-style управляет стилем шрифта и принимает три основных значения: normal, italic и oblique.
normal возвращает текст к обычному виду, без наклона. Значение italic используется для отображения курсивных начертаний, предусмотренных самим шрифтом. В отличие от него, oblique наклоняет текст программно, что особенно заметно, если у выбранного шрифта нет собственного курсива.
Рекомендуется применять italic для семантического выделения фрагментов текста, например терминов или иностранных слов. oblique стоит использовать только в случаях, когда курсивная гарнитура отсутствует.
Пример CSS:
p {
font-style: italic;
}
Такое правило задаст курсивное начертание всем абзацам.
Подключение нестандартных шрифтов с помощью @font-face
@font-face позволяет загрузить шрифт с сервера и применить его к любым элементам страницы без установки на устройство пользователя.
Пример базового подключения:
@font-face {
font-family: 'MyFont';
src: url('fonts/MyFont.woff2') format('woff2'),
url('fonts/MyFont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
Рекомендации:
- Использовать несколько форматов (woff2, woff, ttf, eot) для совместимости.
- Размещать файлы в отдельной папке, например
/fonts/. - Прописывать разные варианты веса и начертания через отдельные блоки @font-face.
- Для ускорения загрузки указывать свойство
font-display: swap;, чтобы текст отображался системным шрифтом до загрузки кастомного. - Минимизировать размер файлов с помощью утилит (например, Font Squirrel, Transfonter).
Подключение шрифта к элементам:
body {
font-family: 'MyFont', Arial, sans-serif;
}
Использование веб-шрифтов из Google Fonts
Google Fonts предоставляет более 1 000 шрифтов с открытой лицензией, готовых к использованию в веб-проектах. Чтобы подключить шрифт, необходимо перейти на официальный сайт, выбрать шрифт и скопировать ссылку из раздела <link> в HTML.
Например, для подключения шрифта Roboto используйте:
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
После подключения шрифта его можно применить в CSS через свойство font-family:
body { font-family: 'Roboto', sans-serif; }
Google Fonts поддерживает множество начертаний и веса. Рекомендуется подключать только используемые варианты, чтобы уменьшить размер загружаемых файлов и ускорить загрузку страницы. Например, если нужны только Regular 400 и Bold 700, ссылка будет выглядеть так:
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
Для оптимизации отображения добавляйте параметр display=swap. Он обеспечивает мгновенную замену шрифта без задержки текста при загрузке.
Также Google Fonts позволяет использовать шрифты через CSS @import, но этот способ увеличивает время загрузки, поэтому предпочтительнее подключение через <link> в <head> страницы.
Для элементов с особым стилем используйте конкретные селекторы и веса шрифта:
h1 { font-family: 'Roboto', sans-serif; font-weight: 700; }
p { font-family: 'Roboto', sans-serif; font-weight: 400; }
. Сейчас он считается устаревшим и не рекомендуется. Вместо этого нужно применять CSS через style-атрибут или внешние таблицы стилей, так как это позволяет гибко управлять шрифтом и другими параметрами текста.
Загрузка...
