Размер, насыщенность и стиль шрифта
Управляйте размером текста с помощью font-size, насыщенностью с помощью font-weight и стилем с помощью font-style.
«Размер, насыщенность и стиль шрифта» — бесплатный урок CSS Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.
font-size
font-size задаёт высоту глифов. Свойство принимает любую единицу длины. Для масштабируемой и доступной типографики рекомендуется использовать rem.
<h1>Heading (2.5rem)</h1>
<p>Body text (1rem)</p>
<small>Fine print (0.75rem)</small>
Размеры шрифта, заданные ключевыми словами
CSS также предоставляет абсолютные размеры, заданные ключевыми словами (xx-small–xx-large), и относительные ключевые слова (smaller, larger), зависящие от размера шрифта родительского элемента.
<p class="note">Smaller note text</p>
<p class="big">Extra large text</p>
font-weight
font-weight задаёт насыщенность текста. Используйте числовые значения (от 100 до 900 с шагом 100) или ключевые слова:
<p class="thin">Thin weight (100)</p>
<p>Normal body weight (400) with <strong>bold strong text (700)</strong></p>
<p class="heavy">Heavy weight (900)</p>
font-weight и переменные шрифты
Для переменных шрифтов допустимо любое целое значение насыщенности (например, font-weight: 550), а сам шрифт интерполирует значения между заданными осями. Это обеспечивает тонкий контроль над типографикой.
font-style
font-style управляет отображением курсива и наклонного начертания:
<p>This has <em>italic emphasis</em> inline.</p>
<p class="normal">Normal style text</p>
<p class="oblique">Oblique 20deg text</p>
font-variant
font-variant включает типографические возможности, например капитель:
<p>The <abbr title="Cascading Style Sheets">CSS</abbr> abbreviation uses small-caps.</p>
Сокращённая запись font
Сокращённая запись font объединяет начертание, вариант, насыщенность, размер, межстрочный интервал и семейство:
<p>Shorthand font: italic bold 1.1rem/1.6 Roboto.</p>
Адаптивное масштабирование размера шрифта
Используйте clamp(), чтобы создать гибкую типографику, которая плавно масштабируется между минимальным и максимальным размером:
<h1>Resize the window — this heading scales fluidly.</h1>
line-height для удобства чтения
line-height задаёт вертикальный интервал между строками. Рекомендуется использовать значение без единиц (например, 1.5) — оно масштабируется вместе с размером шрифта потомков.
<h1>Tight Heading Line Height</h1>
<p>Body copy with relaxed 1.5 line-height wraps across multiple lines for comfortable reading, demonstrating the effect of the line-height property on paragraph text blocks.</p>
letter-spacing и word-spacing
letter-spacing добавляет интервал между символами, а word-spacing — между словами. Используйте единицы em, чтобы интервалы масштабировались вместе с размером шрифта.
<h2 class="heading">Spaced Out Heading Text</h2>
Доступный размер шрифта
Никогда не задавайте font-size в px для элемента html или body. Это переопределяет установленное пользователем предпочтение размера шрифта в браузере. Вместо этого используйте единицы rem, основанные на стандартном размере шрифта браузера.
Быстрая проверка
Какое числовое значение font-weight соответствует ключевому слову bold?
Итоги
Используйте rem для font-size, чтобы учитывать предпочтения пользователя. Свойство font-weight принимает значения от 100 до 900 или ключевые слова. Сокращённая запись font объединяет несколько свойств. Используйте clamp() для гибкой типографики, а line-height без единиц — для равномерных интервалов.
Часто задаваемые вопросы
Урок «Размер, насыщенность и стиль шрифта» бесплатный?
Да — полный текст урока «Размер, насыщенность и стиль шрифта» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.
Чему я научусь в уроке «Размер, насыщенность и стиль шрифта»?
Управляйте размером текста с помощью font-size, насыщенностью с помощью font-weight и стилем с помощью font-style. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать CSS Academy?
Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Размер, насыщенность и стиль шрифта»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке CSS Academy?
Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Семейство шрифтов и безопасные для веба шрифты
- Размер, насыщенность и стиль шрифта
- Выравнивание, оформление и интервалы текста
- Google Fonts и @font-face