logo

Правильное применение глобального шрифта для HTML-документа

Быстрый ответ

Для того чтобы задать одинаковый шрифт для всего HTML-документа, используйте свойство CSS font-family на уровне элемента html:

CSS
Скопировать код
html {
  font-family: 'Roboto', sans-serif;
}

Так, шрифт 'Roboto' будет установлен как основной для всего документа, что приведёт к единообразию текста.

Для полной унификации текстовых стилей, можно сочетать font-family с font-size и color, используя !important для того чтобы переопределить другие стили:

CSS
Скопировать код
* {
  font-family: 'Roboto', sans-serif !important;
  font-size: 16px !important;
  color: #333 !important;
}

Размер шрифта по умолчанию и масштабируемость

Для удобства и масштабируемости рекомендуется задать базовый размер шрифта на уровне body, используя при этом относительные единицы измерения, такие как rem или em:

CSS
Скопировать код
body {
  font-size: 1rem; /* Базовый размер шрифта */
}

Такой подход позволяет удобно масштабировать размеры шрифтов других элементов, которые привязаны к базовому размеру.

Резервные шрифты для единообразия отображения

Важно включать в список шрифтов резервные варианты при задании свойства font-family. Это гарантирует сохранение однородности визуального стиля в случае отсутствия основного шрифта:

CSS
Скопировать код
html {
  font-family: 'Open Sans', 'Arial', sans-serif;
}

Здесь 'Open Sans' является предпочтительным шрифтом, а 'Arial' и обобщённый sans-serif выступают в качестве резервных вариантов.

Визуализация

Примером может служить HTML-документ представленный как незапятнанный холст, а выбранный шрифт — как краска:

Markdown
Скопировать код
Холст: [🖼️] Ваш HTML-документ
Краска: [🎨] Глобальный шрифт "Helvetica"

Если применить шрифт ко всему холсту, это аналогично окрашиванию его в одном тоне:

CSS
Скопировать код
html { font-family: 'Helvetica', sans-serif; }

Так происходит объединение элементов в единый стиль:

Markdown
Скопировать код
До: [🖼️🅰️🅱️🆎]  // Разные шрифты, как разноцветные краски
После: [🖼️✨✨✨]     // Один шрифт, как единый цвет на холсте

Это создаёт гармоничное визуальное впечатление.

Переопределение стандартных стилей

Иногда возникает потребность переопределить стандартные стили для некоторых элементов, чтобы создать визуальную иерархию или уникальный брендовый вид. В таких случаях используйте специфические CSS-селекторы и директиву !important, но будьте осторожны, чтобы не нарушить каскад CSS:

CSS
Скопировать код
h1 {
  font-family: 'Georgia', serif !important;
  font-size: 2rem !important;
  /* Ведь размер действительно имеет значение */
}

Адаптация размера шрифта для разных экранов

Чтобы поддерживать удобство чтения текста на устройствах разного размера, используйте медиа-запросы с учётом адаптивной типографики:

CSS
Скопировать код
@media (max-width: 768px) {
  html {
    font-size: 14px; /* Уменьшение размера шрифта для небольших экранов */
  }
}

@media (min-width: 769px) {
  html {
    font-size: 16px; /* Увеличение размера шрифта для больших экранов */
  }
}

Сокращённое свойство шрифта

Для более быстрой настройки стилей использование сокращённого свойства font может быть удобно. С его помощью задаются стиль, вариант шрифта, жирность, размер, междустрочный интервал и семейство шрифтов в одной строке:

CSS
Скопировать код
body {
  font: 400 1rem/1.5 'Roboto', sans-serif;
  /* Сэкономльте своё время — это важно */
}

Так, для весь текста в body будет определён шрифт 'Roboto' размером 1rem и межстрочным интервалом 1.5.

Полезные материалы

  1. CSS: Каскадные таблицы стилей | MDN — Подробное руководство по использованию CSS в веб-разработке.
  2. Веб-типографика: Дизайн таблиц для чтения, а не просто для просмотра – A List Apart — Как создавать легко читаемые веб-таблицы с помощью типографики.
  3. Обзор шрифтов – Google Fonts — Исследуйте разнообразие шрифтов для улучшения дизайна сайта.
  4. CSS Font Stack: Веб-безопасные шрифтовые семейства с примерами кода HTML и CSS. — Отличный ресурс для подбора веб-шрифтов.
  5. Полное руководство по элементу <table> | CSS-Tricks — Подробное руководство по стилизации таблиц с помощью CSS.
  6. Правило CSS @font-face — Как использовать правило @font-face для встраивания пользовательских шрифтов в веб-страницы.
  7. Размер шрифта с rem – Snook.ca — Применение единиц rem для надёжной установки размеров шрифта на различных устройствах.