CSS font-sizeСвойство

Пример

Задайте размер шрифта для разных HTML-элементов.

h1 {font-size:250%} h2 {font-size:200%} p {font-size:100%}

Попробуйте сами »

Определение свойства и инструкции по использованию

Свойство font-size используется для установки размера шрифта.

font-size не только определяет размер отображаемого текста, но также влияет наem、line-height、letter-spacingи другие связанные с типографикой расчёты.

Значение по умолчанию: средний
Наследуется: да
версия: CSS1
Синтаксис JavaScript: object.style.fontSize="larger"
/*<absolute-size>, значение абсолютного размера*/ font-size: xx-small; font-size: x-small; font-size: small; font-size: medium; font-size: large; font-size: x-large; font-size: xx-large; /*<relative-size>, значение относительного размера*/ font-size: larger; font-size: smaller; /*<length>, значение длины*/ font-size: 12px; font-size: 0.8em; /*<percentage>, значение в процентах*/ font-size: 80%; font-size: inherit;

Поддержка браузеров

Числа в таблице указывают первую версию браузера, которая поддерживает это свойство.

Свойство
font-size 1.0 5.5 1.0 1.0 7.0

Основные концепции

font-sizeИспользуется для установки размера шрифта текста внутри элемента.

Размер шрифта корневого элемента по умолчанию в браузере обычно16px。

То есть по умолчаниюhtml { font-size: 100%; }обычно эквивалентноhtml { font-size: 16px; }。

Это значение по умолчанию служит основой расчёта для многих относительных единиц.

Пример

/* Установить размер шрифта по умолчанию для страницы */
html {
    font-size: 100%; /* Обычно эквивалентно 16px с учётом пользовательских настроек браузера */
}

/* Установить размер текста body */
body {
    font-size: 16px; /* Распространённый базовый размер шрифта для body */
    line-height: 1.6; /* Используйте безразмерный line-height для более простого наследования */
}

/* Задать размер заголовка */
h1 {
    font-size: 2rem; /* Примерно 32px по умолчанию */
}

Не рекомендуется произвольно фиксировать размер шрифта корневого элемента на очень маленьком значении, так как это может повлиять на предпочтения пользователя в отношении шрифта браузера и доступность.

Распространённые типы значений для font-size

font-sizeМожно использовать ключевые слова, единицы длины и функции.

Разные значения подходят для разных сценариев.

Типы значений Пример Описание Применимые сценарии
Ключевые слова small、large Вычисляется браузером в соответствии с предустановленными коэффициентами. Подходит для простых страниц и сценариев, в которых нужно следовать настройкам пользователя по умолчанию.
Абсолютные единицы 16px、12pt Размер относительно фиксирован, что обеспечивает высокую управляемость. Точное управление интерфейсом и стилями печати.
Относительные единицы 1rem、1.25em Вычисляются относительно родительского элемента или корневого элемента. Адаптивный дизайн и страницы на основе компонентов.
Единицы области просмотра 4vw、3vmin Вычисляются относительно размера области просмотра браузера. Крупные заголовки, демонстрационные страницы и плавная типографика.
Функции CSS clamp()、calc() Динамически вычисляет размер шрифта с помощью выражений. Современная адаптивная типографика.

Ключевые слова

CSS предоставляет два типа ключевых слов для размера шрифта.

Один тип — ключевые слова абсолютного размера, напримерsmall、medium、large。

Другой тип — ключевые слова относительного размера, напримерlargerиsmaller。

Ключевые слова абсолютного размера

Ключевые слова абсолютного размера — это не фиксированные значения в пикселях, а уровни, вычисляемые браузером на основе размера шрифта по умолчанию.

Ключевые слова Приблизительные значения при размере по умолчанию 16px ratio Применимые сценарии
xx-small примерно 9px 0.56 раза Очень мелкий текст для аннотаций, не рекомендуется для основного содержимого.
x-small Около 10px 0.625x Сноски или вспомогательная информация.
small Около 13px 0.8 раза Вспомогательный текст.
medium Около 16px 1x Основной текст по умолчанию.
large Около 18px 1.125x Мелкие заголовки или выделенный текст.
x-large Около 24px 1.5 раза заголовок.
xx-large Около 32px 2x Крупный заголовок.
xxx-large Около 48px 3x Дисплейные заголовки.

Ключевые слова относительного размера

largerиsmallerОни будут масштабироваться вверх или вниз относительно размера шрифта родительского элемента.

Они подходят для простых сценариев, где размер шрифта должен следовать за родительским элементом.

Пример

/* Размер шрифта родительского элемента — 16px */
.parent {
    font-size: 16px;
}

/* larger увеличивает масштаб относительно родительского элемента, конкретное соотношение определяется браузером */
.child-larger {
    font-size: larger;
}

/* smaller уменьшает масштаб относительно родительского элемента, точное соотношение определяется браузером */
.child-smaller {
    font-size: smaller;
}

Значения-ключевые слова более удобны для доступности, но дают меньше контроля; в реальных проектах чаще используютсяrem、emилиclamp()。

Абсолютные единицы

Значения абсолютных единиц относительно фиксированы и не зависят от размера шрифта родительского элемента.

Они подходят для интерфейсов, требующих точного управления, или для печатных стилей.

единица Значение Соотношение преобразования Применимые сценарии
px Логические пиксели CSS. Наиболее часто используемая единица длины на экранах. Веб-интерфейсы и размеры шрифтов компонентов.
pt Типографский пункт. 1pt = 1/72 inch, приблизительно 1.333px. Стиль печати.
cm / mm Сантиметры / миллиметры. 1cm = 37.8px，1mm = 3.78px. Печатная типографика; редко используется на веб-страницах.
in inch. 1in = 96px. Печать или преобразование специальных размеров.
pc пика. 1pc = 12pt = 16px. Традиционные сценарии типографики, редко используются на веб-страницах.

Пример

/* Соотношения преобразования абсолютных единиц */
/* 1in = 96px = 2.54cm = 25.4mm = 6pc = 72pt */

/* Обычно при печати используют pt */
@media print {
    body {
        font-size: 12pt;
    }
}

/* На экранах обычно используют px, rem или clamp() */
@media screen {
    body {
        font-size: 16px;
    }
}

На современных экранах 1px обычно обозначает логический пиксель CSS, который не обязательно равен одному физическому пикселю.

Относительные единицы

Относительные единицы вычисляются динамически на основе опорного значения.

Это наиболее часто используемые единицы font-size в современном адаптивном дизайне.

единица Опорный объект Описание Типичное использование
em Размер шрифта родительского элемента или текущего элемента. используется дляfont-sizeПри расчёте относительно родительского элемента они кумулятивно умножаются при вложенности. Локальное масштабирование компонента.
rem корневой элементhtmlразмер шрифта. Не зависит от вложенности, обеспечивая более стабильный расчёт. Система размеров шрифта для всего сайта.
% Размер шрифта родительского элемента. Вfont-sizeведёт себя аналогичноem。 Масштабируется пропорционально родительскому элементу.
ch Символ0ширина. Чаще используется для управления шириной линии. width: 60ch;
ex Высота строчной буквы x. Значительно зависит от дизайна шрифта. Несколько особых случаев типографики.
lh Высота строки элемента. Новая единица, добавленная в CSS Values 4. Интервал, выровненный по высоте строки.

Разница между em и rem

emв настройкахfont-sizeон рассчитывается относительно размера шрифта родительского элемента.

Если несколько уровней вложенности все используютemразмер шрифта будет умножаться слой за слоем.

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

Пример

/* Размер шрифта корневого элемента — 16px */
html {
    font-size: 16px;
}

/* em зависит от размера шрифта родительского элемента */
.outer {
    font-size: 1.5em; /* 16px × 1.5 = 24px */
}

.middle {
    font-size: 1.5em; /* 24px × 1.5 = 36px */
}

/* rem всегда вычисляется относительно html */
.outer-rem {
    font-size: 1.5rem; /* 16px × 1.5 = 24px */
}

.middle-rem {
    font-size: 1.5rem; /* 16px × 1.5 = 24px, не умножается кумулятивно */
}

Вfont-sizeИспользуется наemПри использовании он определяется относительно размера шрифта родительского элемента; но у того же элементаpaddingилиmarginИспользуется наemон определяется относительно размера шрифта самого элемента.

Единицы области просмотра

Единицы области просмотра рассчитываются на основе размера окна браузера.

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

Однако использование только единиц области просмотра может привести к тому, что текст будет слишком мелким на телефонах и слишком крупным на сверхшироких экранах.

единица Значение Описание Типичные сценарии
vw 1% ширины области просмотра. Чем шире область просмотра, тем больше размер шрифта. Адаптивные заголовки.
vh 1% от высоты области просмотра. На мобильных устройствах на них влияет панель инструментов браузера. Страницы полноэкранного отображения.
vmin vwиvh1% от меньшего значения. Подходит для работы как в альбомной, так и в портретной ориентации. Адаптивные крупные заголовки.
vmax vwиvh1% от большего значения. Большая степень вариации. Визуальный дизайн в стиле презентации.
svh / dvh / lvh Малая / динамическая / большая высота области просмотра. Используется для решения проблемы изменения панели инструментов мобильного браузера. Полноэкранные страницы для мобильных устройств.
cqi / cqb Единицы контейнерных запросов. Относительно размера контейнера, а не всего окна просмотра. Адаптивная типографика на уровне компонентов.

Пример

/* При использовании только vw масштабирование font-size может быть слишком агрессивным */
h1 {
    font-size: 5vw;
}

/* Для задания верхнего и нижнего пределов рекомендуется использовать clamp() */
h1 {
    font-size: clamp(1.5rem, 5vw, 3.5rem);
}

/* Единицы контейнерных запросов подходят для адаптивного дизайна на уровне компонентов */
.card {
    container-type: inline-size;
}

.card-title {
    font-size: clamp(1rem, 4cqi, 2rem);
}

Единицы контейнерных запросов подходят для библиотек компонентов и макетов карточек, потому что размер компонента не обязательно равен размеру области просмотра браузера.

функция clamp()

clamp()Это очень практичная функция в современной адаптивной типографике.

Она позволяет ограничить размер шрифта между минимальным и максимальным значением.

Среднее значение обычно использует единицы области просмотра или расчётные выражения, позволяя размеру шрифта меняться вместе с экраном.

Параметр Значение Пример Описание
минимальное значение Размер шрифта не будет меньше этого значения. 1rem Обеспечивает читаемость на мобильных устройствах.
предпочтительное значение Браузер сначала попытается использовать это динамическое значение. 2vw + 1rem Позволяет размеру шрифта плавно изменяться вместе с экраном.
максимальное значение Размер шрифта не превысит это значение. 3rem Не позволяет тексту быть слишком крупным на больших экранах.

Пример

/* clamp(минимум, предпочтительное, максимум) */
h1 {
    font-size: clamp(1.75rem, 2.5vw + 1rem, 3.5rem);
}

h2 {
    font-size: clamp(1.25rem, 2vw + 0.75rem, 2.25rem);
}

p {
    font-size: clamp(1rem, 1vw + 0.5rem, 1.25rem);
}

/* Создайте дизайн-систему с помощью CSS-переменных */
:root {
    --text-sm: clamp(0.8rem, 1.5vw + 0.25rem, 0.95rem);
    --text-md: clamp(1rem, 2vw + 0.5rem, 1.25rem);
    --text-lg: clamp(1.25rem, 3vw + 0.5rem, 2rem);
    --text-xl: clamp(1.75rem, 4vw + 0.75rem, 3.5rem);
}

.article-title {
    font-size: var(--text-xl);
}

Функции min() и max()

min()Выбирает наименьшее значение среди нескольких значений.

max()Выбирает наибольшее значение среди нескольких значений.

Их можно использовать для размера шрифта, но во флюидной типографике они обычно не так хороши, какclamp()интуитивно понятный.

Функция Поведение Пример Применимые сценарии
min() Выбирает меньшее вычисленное значение. min(5vw, 48px) Ограничивает только максимальное значение.
max() Выбирает большее вычисленное значение. max(1rem, 2vw) Ограничивает только минимальное значение.
clamp() Устанавливает минимальное, предпочтительное и максимальное значения одновременно. clamp(1rem, 2vw, 2rem) Полноценное решение для плавного размера шрифта.

Пример

/* Размер шрифта не превысит 48px, но на маленьких экранах может оказаться слишком маленьким */
h1 {
    font-size: min(5vw, 48px);
}

/* Размер шрифта не будет меньше 16px, но на больших экранах может оказаться слишком большим */
h2 {
    font-size: max(16px, 3vw);
}

/* Ограничивает как минимальное, так и максимальное значения, лучше подходит для реальных проектов */
h3 {
    font-size: clamp(16px, 3vw, 32px);
}

Функция calc()

calc()В CSS можно смешивать разные единицы в вычислениях.

Его часто используют, чтобы объединять фиксированные значения с относительными.

В сценариях с размером шрифта,calc()часто сvw、remИспользуются вместе.

Пример

/* Используйте calc() для объединения rem и vw */
h1 {
    font-size: calc(1.5rem + 2vw);
}

/* Использование calc() в clamp() делает код понятнее */
h2 {
    font-size: clamp(1.25rem, calc(1rem + 2vw), 3rem);
}

/* Примечание: пробелы должны быть сохранены с обеих сторон оператора */
p {
    font-size: calc(1rem + 0.25vw);
}

calc(1rem+2vw)Такой синтаксис неверен; пробелы должны быть записаны с обеих сторон оператора, например.calc(1rem + 2vw)。

Наследование и каскад

font-sizeЭто наследуемое свойство.

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

это такжеemОдна из причин, по которой при вложенности легко возникают проблемы с кумулятивным умножением.

Пример

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>пример наследования размера шрифта</title>
    <style>
        .article {
font-size: 18px; /* Дочерние элементы наследуют этот размер шрифта по умолчанию */
        }

        .article p {
font-size: 1em; /* равно 18px */
        }

        .article .note {
            font-size: 0.875em; /* 18px × 0.875 = 15.75px */
        }
    </style>
</head>
<body>
    <div class="article">
        <p>Это некоторый текст.</p>
        <p class="note">Это пояснительный текст меньшего размера.</p>
    </div>
</body>
</html>

Лучшие практики

В реальных проектах не рекомендуется жёстко кодировать весь текст какpx。

Лучший подход — использовать размер корневого шрифта, CSS-переменные иclamp()Объединяет в стабильную систему размеров шрифта.

Не рекомендуется Рекомендуемая практика Причина
font-size: 12px;Используется для крупного основного текста. font-size: 1rem; Слишком мелкий основной текст может ухудшить читательский опыт.
Все слои компонентов используютem。 Для глобальных размеров шрифта используйтеrem, а для локального масштабирования используйтеem。 Избегайте потери контроля над размером шрифта из-за вложенного умножения.
Только заголовокfont-size: 6vw;。 font-size: clamp(1.75rem, 4vw, 3.5rem); Позволяет избежать слишком мелкого текста на маленьких экранах и слишком крупного на больших экранах.
Произвольное определение размеров шрифта на разных страницах. Используйте CSS-переменные для унификации шкалы размеров шрифта. Упрощает поддержание единообразной визуальной системы.

Пример

/* Рекомендуется: используйте CSS-переменные для управления системой размеров шрифта */
:root {
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: clamp(1.5rem, 3vw, 2.5rem);
    --font-size-hero: clamp(2rem, 6vw, 4.5rem);
}

body {
    font-size: var(--font-size-base);
    line-height: 1.6;
}

.caption {
    font-size: var(--font-size-sm);
}

.article-title {
    font-size: var(--font-size-xl);
}

.hero-title {
    font-size: var(--font-size-hero);
}

Обычно можно использоватьremСоздайте глобальную систему размеров шрифта, используйтеemдля локального пропорционального масштабирования используйтеclamp()для адаптивных заголовков.

Рекомендуемая система типографской шкалы

Ниже представлена система токенов размера шрифта, основанная на подходе Modular Scale.

Каждый токен используетclamp()Обеспечьте подходящие размеры как на самых маленьких, так и на самых больших экранах.

Токен Назначение Рекомендуемые значения clamp() Примечания
--text-xs Метки, бейджи clamp(0.7rem, 0.5vw + 0.5rem, 0.8rem) Не рекомендуется опускаться ниже 11px.
--text-sm Вспомогательный текст, подписи clamp(0.85rem, 0.8vw + 0.6rem, 0.95rem) Часто встречается в аннотациях и вторичной информации.
--text-md Базовый размер основного текста clamp(1rem, 1vw + 0.75rem, 1.125rem) Рекомендуется как размер шрифта основного текста по умолчанию.
--text-lg Подзаголовок clamp(1.15rem, 1.5vw + 0.8rem, 1.5rem) Подзаголовки статей или карточек.
--text-xl Заголовок уровня h3 clamp(1.25rem, 2vw + 0.75rem, 2rem) Заголовок подраздела.
--text-2xl Заголовок уровня h2 clamp(1.5rem, 2.5vw + 1rem, 2.5rem) Заголовок раздела.
--text-3xl Заголовок уровня h1 clamp(2rem, 4vw + 1rem, 3.5rem) Главный заголовок страницы.
--text-hero Крупный заголовок display-типа clamp(2.5rem, 6vw + 1rem, 5rem) Заголовок главной страницы или лендинга.

Пример

/* Рекомендуется: используйте clamp() + переменные CSS для управления системой размеров шрифта */
:root {
    --text-xs:   clamp(0.7rem, 0.5vw + 0.5rem, 0.8rem);
    --text-sm:   clamp(0.85rem, 0.8vw + 0.6rem, 0.95rem);
    --text-md:   clamp(1rem, 1vw + 0.75rem, 1.125rem);
    --text-lg:   clamp(1.15rem, 1.5vw + 0.8rem, 1.5rem);
    --text-xl:   clamp(1.25rem, 2vw + 0.75rem, 2rem);
    --text-2xl:  clamp(1.5rem, 2.5vw + 1rem, 2.5rem);
    --text-3xl:  clamp(2rem, 4vw + 1rem, 3.5rem);
    --text-hero: clamp(2.5rem, 6vw + 1rem, 5rem);
}

body {
    font-size: var(--text-md);
    line-height: 1.6;
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
small { font-size: var(--text-sm); }

Рекомендуемые практики и чего следует избегать

Ниже приведены несколько наборов рекомендуемых и нерекомендуемых практик для распространённых сценариев.

Сценарии Не рекомендуется Рекомендуемая практика
Настройка размера шрифта корневого элемента. html { font-size: 10px; } html { font-size: 100%; }
Размер шрифта body p { font-size: 14px; } p { font-size: 1rem; }
Размер шрифта заголовка h1 { font-size: 48px; } h1 { font-size: clamp(1.75rem, 4vw + 1rem, 3.5rem); }
Мелкий текст small { font-size: 11px; } small { font-size: max(0.75rem, 12px); }
Адаптивный размер шрифта. с несколькими@mediaПереключение фиксированных значений в контрольных точках Использованиеclamp()Реализация плавных переходов
доступность html { font-size: 62.5%; } Не задавайте корневой размер шрифта или используйте100%

не делайтеhtmlилиbodyЗакреплено сверхуpxУстановка корневого размера шрифта переопределит предпочтительный размер шрифта, заданный пользователем в браузере, из-за чего функция доступности с крупным текстом перестанет работать.

Вывод формулы плавного размера шрифта с помощью clamp()

clamp()Среднее значение обычно использует единицы viewport плюс базовое значение в rem.

Это образует формулу линейной интерполяции «опорная точка + наклон», точно контролирующую скорость изменения размера шрифта при разных ширинах экрана.

Шаги вывода формулы

Предположим, размер шрифта должен плавно изменяться с 16px до 24px между вьюпортами 320px и 1240px.

Шаги формула Расчёт в этом примере
1. Вычислите угловой коэффициент (max px - min px) / (max vp - min vp) (24 - 16) / (1240 - 320) = 0.00869, приблизительно 0.87vw
2. Вычислите свободный член Минимальное значение px - угловой коэффициент × минимальное значение vp 16 - 0.00869 × 320 = 13.2px, приблизительно 0.825rem
3. Выведите предпочтительное значение Угловой коэффициент × 100vw + свободный член 0.87vw + 0.825rem

Пример

/* Формула: preferred = slope × 100vw + intercept */
/* Наклон = (max px - min px) / (max vp - min vp) */
/* Свободный член = минимум px - slope × минимум vp */

/* Пример: переход от 16px к 24px при ширине вьюпорта от 320px до 1240px */
/* slope = (24-16) / (1240-320) = 0.00869 ≈ 0.87vw */
/* intercept = 16 - 0.00869×320 ≈ 13.2px ≈ 0.825rem */

p {
    font-size: clamp(1rem, 0.87vw + 0.825rem, 1.5rem);
}

clamp()Поддерживается в Chrome 79+, Firefox 75+, Safari 13.1+ и Edge 79+, поэтому его можно безопасно использовать в продакшене.

Подробное объяснение функций min() и max()

min(a, b, ...)Возвращает минимум из нескольких значений, что эквивалентно установке «верхнего предела».

max(a, b, ...)Возвращает максимум из нескольких значений, что эквивалентно установке «нижнего предела».

Они могут принимать любое количество аргументов, и в аргументах можно смешивать разные единицы измерения.

Функция Поведение Эффект Применимые сценарии
min() Выбрать минимальное значение среди всех параметров Установить верхний предел Предотвращает слишком большой размер шрифта.
max() Выбрать максимальное значение среди всех параметров Установить нижний предел Обеспечивает минимальный читаемый размер шрифта.
clamp() Одновременно ограничить минимальное, предпочтительное и максимальное значения Установить верхний и нижний пределы. Полноценное решение для плавного размера шрифта.

Пример

/* min() — размер шрифта не более 2rem */
h2 {
    font-size: min(5vw, 2rem);
}

/* max() — размер шрифта не менее 1rem */
малый {
    font-size: max(0.75vw, 1rem);
}

/* Комбинация: min и max эквивалентны clamp */
/*(M, VAL, MAX) эквивалентно max(MIN, min(VAL, MAX)) */
h1 {
    font-size: max(1.2rem, min(4vw, 3rem));
}

/* Несколько параметров: берёт минимум из трёх */
.label {
    font-size: min(1rem, 3vw, 14px);
}

Смешанные единицы */
.fluid {
    font-size: max(12px, 1.2vw + 0.5rem);
}

Подробное объяснение функции calc()

calc()Поддерживает четыре арифметические операции: сложение, вычитание, умножение и деление, а также может смешивать любые единицы.

В сценариях с размером шрифта часто используется сremиvwИспользуйте в комбинации.

Правила арифметических операций

операция Синтаксис Предел Пример
сложение calc(1rem + 0.5vw) С обеих сторон оператора должны быть пробелы. font-size: calc(1rem + 0.5vw);
вычитание calc(2rem - 4px) С обеих сторон оператора должны быть пробелы. font-size: calc(2rem - 4px);
умножение calc(1.5 * 16px) Одно из значений должно быть без единиц измерения. font-size: calc(1.5 * 16px);
division calc(24px / 1.5) Правая часть должна быть безразмерным числом и не должна быть равна 0. font-size: calc(24px / 1.5);

calc(1rem+2px)Это неверный синтаксис; пробелы должны быть с обеих сторон оператора, правильный синтаксис:calc(1rem + 2px)。

Пример

/* Основные арифметические операции */
font-size: calc(1rem + 0.5vw);       /* Сложение */
font-size: calc(2rem - 4px);         /* Вычитание */
font-size: calc(1.5 * 16px);         /* Умножение (одно значение должно быть безразмерным числом) */
font-size: calc(24px / 1.5);         /* Деление (правая часть должна быть безразмерным числом) */

/* В паре с CSS-переменными */
:root {
    --scale: 1.25;
    --base: 1rem;
}
h3 {
    font-size: calc(var(--base) * var(--scale));
}

/* Вложенный calc (современные браузеры поддерживают пропуск внутреннего calc) */
font-size: calc(clamp(1rem, 2vw, 2rem) * 0.8);

Используйте calc для построения модульной шкалы размеров шрифта

Черезcalc()А с CSS-переменными можно реализовать шкалу размеров шрифта на основе фиксированного соотношения.

В следующем примере используется соотношение «большая терция» (1.25).

Пример

/* Используйте calc + CSS-переменные для реализации соотношения большой терции (1.25) */
:root {
    --ratio: 1.25;
    --step-0: 1rem;                                       /* 16px */
    --step-1: calc(var(--step-0) * var(--ratio));         /* 20px */
    --step-2: calc(var(--step-1) * var(--ratio));         /* 25px */
    --step-3: calc(var(--step-2) * var(--ratio));         /* 31.25px */
    --step--1: calc(var(--step-0) / var(--ratio));        /* 12.8px */
}

p     { font-size: var(--step-0); }
h3    { font-size: var(--step-1); }
h2    { font-size: var(--step-2); }
h1    { font-size: var(--step-3); }
small { font-size: var(--step--1); }

Наследование и каскад

font-sizeЭто наследуемое свойство.

Если дочерний элемент явно не задаёт размер шрифта, он наследует вычисленное значение родительского элемента, а не объявленное значение.

Наследование процесса вычисления

Ниже показана типичная цепочка наследования font-size.

Селекторы объявленное значение Результат вычисления Описание
html 100% 16px Значение по умолчанию браузера.
body inherit 16px Унаследовано от html.
.article 1.125rem 18px Вычисляется на основе размера шрифта корневого элемента.
.article p inherit 18px Наследуется вычисленное значение 18px, а не 1.125rem.
.article em 1em 18px emНа основе вычисленного значения родительского элемента: 1 × 18px = 18px.

Специфичность и порядок каскада

Когда несколько правил одновременно задаютfont-sizeПри применении следующие приоритеты действуют от высокого к низкому.

Приоритет Source Пример
1 (наивысший) !importantвстроенный стиль <p style="font-size: 20px !important">
2 !importantПравила таблицы стилей. p { font-size: 20px !important; }
3 встроенный стиль <p style="font-size: 18px">
4 Селектор ID #title { font-size: 24px; }
5 Селекторы классов / псевдоклассов / атрибутов .heading { font-size: 22px; }
6 Селекторы элементов / псевдоэлементов p { font-size: 16px; }
7 (самый низкий) Унаследованные / стили браузера по умолчанию Исходит от родительского элемента или настроек браузера по умолчанию.

Пример

/* Специфичность от высокой к низкой */
/* 1. Встроенный стиль с !important */
/* <p style="font-size: 20px !important"> */

/* 2. Правила таблицы стилей с !important */
p { font-size: 20px !important; }

/* 3. Встроенный стиль */
/* <p style="font-size: 18px"> */

/* 4. ID-селекторы */
#title { font-size: 24px; }

/* 5. Селекторы классов/псевдоклассов/атрибутов */
.heading { font-size: 22px; }

/* 6. Селекторы элементов/псевдоэлементов */
p { font-size: 16px; }

/* 7. Наследование / стили браузера по умолчанию */

не делайтеhtmlилиbodyЗакреплено сверхуpxУстановка размера шрифта корневого элемента переопределит пользовательские настройки шрифта браузера. Пожалуйста, используйтеhtml { font-size: 100%; }Или просто не задавайте его.

Интерактивная демонстрация

С помощью демонстрации ниже вы можете наглядно увидеть, как размер шрифта выглядит при использовании разных единиц измерения.

Выберите тип единицы измерения и перетащите ползунок значения — область предпросмотра будет обновляться в реальном времени.

Преобразование единиц font-size и предпросмотр
16px
Пример текста из руководства по CSS font-size

Итог

font-sizeЭто основополагающее свойство системы типографики CSS.

pxПодходит для точного контроля,remПодходит для глобальной системы размеров шрифта,emПодходит для локального масштабирования.

Единицы viewport подходят для гибкой типографики, но лучше сочетать их сclamp()Ограничьте верхнюю и нижнюю границы.

В реальных проектах рекомендуется использовать CSS-переменные для единообразного управления размерами шрифта, отдавая приоритет читаемости и адаптивному опыту.

Рекомендуется для основного текста на экранеrem + clamp(), использовать для стилей печатиpt。

Не фиксируйте корневой размер шрифта и всегда задавайте минимальный предел для мелкого текста (рекомендуется не ниже 12px / 0.75rem).

Для адаптивности на уровне компонентов отдавайте приоритет единицам контейнерных запросовcqi / cqb。


Связанные статьи

Учебник по CSS:Шрифт CSS

Справочник по CSS:свойство font

Другие расширения