Перейти к содержанию

Энциклопедия CSS: font-size

Материал из Викижурнал
CSS: font-size
Тематические порталы
Портал CSS • Портал Веб-разработчиков

Свойство font-size в CSS задаёт размер текста элемента. Оно является важной частью управления типографикой и позволяет регулировать размер шрифта для улучшения читаемости и соответствия дизайну страницы.

Синтаксис

Свойство font-size принимает различные значения, включая фиксированные размеры, относительные размеры и процентные значения. 

font-size: значение;

Типы значений

Свойство font-size поддерживает несколько типов значений:

Фиксированные значения (абсолютные единицы):

  • px: Пиксели, например 16px. Это фиксированный размер, независимый от внешних условий.
  • pt: Пункты, используемые в полиграфии.
  • cm, mm, in: Размеры в сантиметрах, миллиметрах и дюймах соответственно.

Относительные значения (зависят от родительского элемента или других условий):

  • %: Процент от размера шрифта родителя, например 120%.
  • em: Относительное значение, основанное на размере шрифта родителя (1em = 100%).
  • rem: Относительное значение, основанное на размере шрифта корневого элемента <html>. vw, vh: Процент от ширины или высоты окна браузера.

Ключевые слова (заранее определённые размеры):

  • Абсолютные: xx-small, x-small, small, medium, large, x-large, xx-large.
  • Относительные: larger, smaller (зависят от родительского элемента).

Пример использования

HTML

<body>
    <h1 class="large-text">Заголовок крупным шрифтом</h1>
    <p class="default-text">Текст с размером по умолчанию.</p>
    <p class="small-text">Текст с уменьшенным размером.</p>
</body>

CSS

body {
    font-size: 16px; /* Базовый размер текста */
}

.large-text {
    font-size: 32px; /* Фиксированное значение в пикселях */
}

.default-text {
    font-size: 100%; /* Относительно родителя */
}

.small-text {
    font-size: 0.8em; /* Относительно родительского элемента */
}

Использование относительных единиц

Относительные единицы, такие как em, rem и %, делают текст адаптивным и удобным для настройки. Например: 

:root {
    font-size: 16px; /* Размер шрифта по умолчанию */
}

body {
    font-size: 1.5rem; /* 1.5 раза больше базового размера */
}

p {
    font-size: 1em; /* Соответствует размеру родителя */
}

.small-text {
    font-size: 0.75em; /* Уменьшение размера на 25% */
}

Преимущества относительных единиц

  • Лёгкость адаптации шрифта к различным устройствам и экранам.
  • Простота управления масштабированием текста при изменении базового размера.

Поддержка ключевых слов

Ключевые слова, такие как small или larger, удобны для быстрого задания размеров шрифта: 

h1 {
    font-size: x-large;
}

p {
    font-size: smaller;
}

Рекомендации

  • Используйте относительные единицы (rem, %) для адаптивного дизайна.
  • Устанавливайте базовый размер текста на корневом элементе (:root или <html>) для облегчения масштабирования:
   :root {
       font-size: 16px;
   }
  • Используйте медиа-запросы для настройки размеров текста на разных устройствах.

Пример с медиа-запросами

:root {
    font-size: 16px;
}

@media (max-width: 600px) {
    :root {
        font-size: 14px; /* Уменьшение размера текста для маленьких экранов */
    }
}

Поддержка браузерами

Свойство font-size поддерживается всеми современными браузерами, включая мобильные. Однако старые браузеры могут некорректно обрабатывать некоторые относительные единицы, такие как vw или vh.

Заключение

Свойство font-size является важным инструментом для управления размером текста на веб-страницах. Его гибкость позволяет адаптировать текст к любым условиям, от фиксированных значений до динамически изменяемых размеров.

Другие статьи о CSS

Источник — https://ru.wikijournal.org/w-wiki/index.php?title=Энциклопедия_CSS:_font-size&oldid=13755