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

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Каждый из этих элементов можно стилизовать по-своему, например, поменять размер, начертание или цвет. Давайте посмотрим, как это сделать.

💡 Для каждого стиля мы подготовили пример в CodePen — попробуйте поменять значения и посмотрите, как изменится текст.

Сменить шрифт

Чтобы изменить шрифт элемента, используйте CSS-свойство font-family:

body {
  font-family: 'Roboto', Arial, sans-serif;
}

Первым указывается шрифт, который вы хотите добавить. После него через запятую идут альтернативные шрифты. Например, если на компьютере у посетителя сайта не установлен шрифт Roboto, браузер использует шрифт Arial.

Как подключить шрифт на страницу

Изменить цвет и размер текста

Цвет текста задаётся с помощью свойства color. Оно принимает значения в различных форматах: можно написать название цвета (red, blue), шестнадцатеричное значение (#ff0000, #00f) или функцию rgb(), чтобы задать цвет с помощью трёх чисел.

p {
  color: red; /* Красный с помощью слов */
  color: #ff0000; /* Красный с помощью HEX */
  color: rgb(1.0,0.0,0.0); /* Красный с помощью rgb() */
}

Размер текста меняется свойством font-size. Оно принимает значения в пикселях (px), процентах (%) и других единицах измерения.

h1 {
  font-size: 24px;
}

See the Pen Как поменять цвет и размер шрифта by Feizerr (@feizerr) on CodePen.

Добавить жирность

Свойство font-weight задаёт жирность текста. Оно принимает два вида значений.

Численные: от 100 до 900. Например, 400 — обычный шрифт, а 700 — полужирный.

Ключевые слова: normal — обычный шрифт, bold — полужирный, bolder — жирнее, чем текущий, lighter — менее жирный шрифт по сравнению с текущим.

p {
  font-weight: bold; /* Полужирный с помощью ключевого слова */
  font-weight: 700; /* Полужирный с помощью численного значения */
}

See the Pen Untitled by Feizerr on CodePen.

Сделать текст курсивным

Для этого есть свойство font-style. По умолчанию у него стоит значение normal, то есть текст обычный, без курсива. Чтобы поменять начертание, используйте:

  • italic — делает текст курсивным;
  • oblique — делает текст наклонным.
p {
  font-style: italic;
}

Оба значения создают похожий эффект — текст выглядит курсивным, но есть и разница. Если очень упростить, то italic и oblique немного отличаются в начертании. А ещё не у всех шрифтов есть специальная курсивная версия. В таких случаях oblique делает текст похожим на курсив.

See the Pen Как сделать курсивный текст by Feizerr on CodePen.

Преобразовать текст

Свойство text-transform меняет регистр текста. Оно принимает значения:

  • none — без изменений, значение по умолчанию;
  • uppercase — все буквы становятся прописными;
  • lowercase — все буквы становятся строчными;
  • capitalize — первая буква каждого слова находится в верхнем регистре.
p {
  text-transform: uppercase;
}

See the Pen Как изменить text-decoration by Feizerr on CodePen.

Добавить подчёркивание

Свойство text-decoration добавляет тексту декоративные эффекты:

  • overline создаёт линию над текстом,
  • line-through делает текст зачёркнутым,
  • underline добавляет подчёркивание.
p {
  text-decoration: overline;
}

По умолчанию у свойства стоит значение none — без оформления.

See the Pen Как добавить подчёркивание by Feizerr on CodePen.

Создать тень

Свойство text-shadowдобавляет тексту тень. Оно принимает значение в таком формате:

text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5)
/*смещение по горизонтали, смещение по вертикали, радиус размытия, цвет тени */

See the Pen Как добавить тень тексту by Feizerr on CodePen.

Выровнять текст

Свойство text-align выравнивает текст по горизонтали. Оно принимает значения:

  • left — влево;
  • right — вправо;
  • center — по центру;
  • justify — выравнивание по ширине.

See the Pen Как выровнять текст by Feizerr on CodePen.

Изменить высоту строки и межбуквенное расстояние

Свойство line-height устанавливает высоту строки, указывая множитель относительно размера шрифта. Свойство letter-spacing управляет расстоянием между символами.

p {
  line-height: 1.5;
  letter-spacing: 2px;
}

See the Pen Как изменить высоту строки by Feizerr on CodePen.

Нюансы

  • У некоторых шрифтов нет жирного и курсивного варианта.
  • Свойство text-shadow делает текст эффектным, но слишком насыщенные тени могут усложнить чтение текста или создать плохой контраст.
  • Слишком большое или маленькое значение line-height и letter-spacing может нарушить интервалы между буквами и строками.
  • При изменении размера шрифта (font-size) следует учитывать, что очень мелкий и крупный текст может плохо отображаться или стать нечитабельным.

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

Тестируйте вёрстку. Проверяйте, как шрифты отображаются на разных устройствах и браузерах. Некоторые шрифты могут отображаться по-разному на разных платформах.

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

Помните о доступности. Используйте подходящие значения font-weight — слишком мелкий или крупный текст плохо читается. Подбирайте контрастные цвета для текстов.

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

Соблюдайте авторское право. У каждого шрифта есть лицензия, которая описывает, в каких случаях можно использовать шрифт, а в каких нельзя. Например, какие-то варианты нельзя использовать в коммерческих проектах, а какие-то предназначены только для веба или печати. Поэтому нужно внимательно читать лицензию перед загрузкой понравившегося шрифта — вдруг он не подходит под ваши цели.


«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Читать дальше

Игры с бесконечностью, или зачем нам infinity в CSS

Игры с бесконечностью, или зачем нам infinity в CSS

💡 Это перевод статьи Will Boyd из блога CodersBlock. Оригинал: https://codersblock.com/blog/playing-with-infinity-in-css/

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

Ну, мне так кажется.

Кстати, если что, infinity можно использовать только внутри calc(). Ну, поехали!

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Читать дальше
CSS
  • 5 марта 2024
Межстрочное расстояние в CSS. Свойство line-height

Межстрочное расстояние в CSS. Свойство line-height

line-height задает интерлиньяж, то есть расстояние между базовыми линиями соседних строк текста. Это свойство может влиять на читабельность текста и его восприятие.

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Значение line-height можно указывать как в абсолютных единицах (например, px, pt), так и в относительных (em, %, без единицы измерения). Рекомендуется использовать относительные единицы, так как они позволяют сохранить масштабируемость и адаптивность текста.

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

  • line-height: 1.2; — относительное значение, не зависящее от размера шрифта.
  • line-height: 20px; — абсолютное значение, фиксированный размер интерлиньяжа.
  • line-height: 1.5em; — относительное значение, зависящее от размера шрифта элемента.
Читать дальше
CSS
  • 4 марта 2024
Свойство text-align

Свойство text-align

Свойство text-align в CSS используется для определения горизонтального выравнивания текста внутри элемента.

🚀 Сегодня вам бесплатно доступны тренажёры по HTML и CSS.

Свойство text-align может принимать несколько значений, включая:

  • left — выравнивает текст по левому краю контейнера.
  • right — выравнивает текст по правому краю контейнера.
  • center — центрирует текст внутри контейнера.
  • justify — выравнивание текста по ширине. Оба края текста (левый и правый) будут выровнены по краям контейнера.

Пример использования свойства text-align:

p {
  text-align: center;
}

Этот код выравнивает текст внутри всех параграфов (<p>) по центру.

Для практики и улучшения своих навыков работы с text-align и другими свойствами CSS, рекомендуем пройти тренажёр. Он поможет лучше понять, как работает выравнивание текста, и даст возможность попрактиковаться в использовании различных значений свойства text-align.

CSS
  • 4 марта 2024
CSS-препроцессоры в 2024. Большой обзор

CSS-препроцессоры в 2024. Большой обзор

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

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

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Читать дальше
CSS
  • 29 февраля 2024
Как прятать

Как прятать

Когда display: none, а когда visibility: hidden? — спрашивает нас RedFox. Зависит от того, что вы пытаетесь сделать. Есть и другие варианты как спрятать блок и даже специальный атрибут. Давайте разберёмся!

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Если вам приходится что-то прятать, то лучше всего это вообще убрать: сайт легче, код чище... ошибок меньше! Но если вам нужно, чтобы оно там пряталось до поры, а потом кому-то пригодилось — это другое дело. Здесь важно не ошибиться с выбором способа.

Читать дальше
CSS
  • 28 февраля 2024
Новое в 2023 — text-wrap: balance

Новое в 2023 — text-wrap: balance

В 2023 в CSS появилось любопытное свойство text-wrap со значением balance. Оно «уравновешивает» текстовые элементы, чтобы они приятнее выравнивались внутри блока.

h1 {
  text-wrap: balance;
}

Ограничение — текст не длиннее 6 строк, иначе браузеру придётся непросто, и лучше не применять это свойство к body.

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Вот пример заголовка <h1>text-wrap: balance и без него.

На момент написания заметки свойство поддерживается во всех больших браузерах, кроме Safari, а на мобильных — только в Chrome, но то ли ещё будет.

CSS
  • 13 ноября 2023
Знакомство с CSS

Знакомство с CSS

После того как мы разобрались с базовой структурой веб-страницы с помощью HTML, пришло время привнести в неё стиль и красоту. В этом нам поможет CSS, что означает Cascading Style Sheets, или «каскадные таблицы стилей».

CSS используется для оформления HTML-страниц. Если HTML — это скелет сайта, то CSS — его одежда. С помощью CSS мы можем задавать цвета, шрифты, отступы, добавлять анимации и многое другое.

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Читать дальше
CSS
  • 1 ноября 2023
Увеличение ссылки при наведении

Увеличение ссылки при наведении

Задача: плавно увеличить ссылку при наведении.

Решение:

a {
  display: inline-block;
  transition: transform 0.3s ease;
}
a:hover {
  transform: scale(1.2);
}

Первые два свойства просто немного меняют вид ссылки. Свойство color: maroon; меняет цвет текста в тегах <a> на темно-красный, а свойство text-decoration: none; убирает подчеркивание.

Но наша задача — плавно увеличить размер ссылки, а не просто её перекрасить. Поэтому используем свойство transform: scale(1.2), которое срабатывает при наведении курсора и увеличивает размер ссылки в 1.2 раза по сравнению с её начальным размером.

Демо:

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Читать дальше
CSS
  • 13 октября 2023
WOFF больше не нужен

WOFF больше не нужен

Я купил и скачал шрифты для недавнего проекта, распаковал папку, где были только WOFF2-файлы, и сначала не поверил, что такое бывает.

Потом мне стало интересно: они что, забыли WOFF? А он вообще ещё нужен? Ну, всё-таки, веб — это место, где постоянно всё меняется и улучшается, поэтому я пошёл и спросил людей в Mastodon. Ответ был единодушным: нужен только WOFF2!

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Я хорошо помню пост от Зака в конце 2016, после которого я отказался от исчерпывающего синтаксиса @font-face, включавшего TTF, EOT и SVG-шрифты, и перешёл только на WOFF2 и WOFF.

Похоже, с тех пор мир веб-шрифтов изменился ещё разок, и вот актуальная версия @font-face:

@font-face {

  font-family: "Open Sans";
  src: url("opensans.woff2") format('woff2');

}

Остался всего один формат. Просто, скажите?

Как писал Зак, «так как в вебе, когда шрифт не найден, всё равно подгружаются системные шрифты, мы можем идти в ногу со временем». Итак, какие браузеры отправятся в тёмные века системных шрифтов с этим синтаксисом?

  • IE 11, 10, 9, 8, 7, …
  • Chrome 4–35
  • Edge 12 и 13
  • Safari 3–9.1
  • Firefox 2–38
  • Opera 22 и ниже
  • Android 4.4.4 KitKat и ниже (а это <0.5% устройств на Android)
  • Safari на iOS 3.2–9.3

Caniuse.com показывает, что почти у 95% пользователей есть браузер с поддержкой WOFF2. А в относительной статистике (Date Relative — прим. перев.) заметно, что массовый переход на WOFF2 случился в 2015 и 2016. К концу 2016 во всех последних версиях больших браузеров появилась поддержка WOFF2.3

А спустя 7 лет поддержка расширилась настолько, что можно уже не добавлять в проект WOFF-файлы — ну, кроме случая, когда вы точно знаете, что много ваших пользователей используют старые устройства и браузеры.

С другой стороны, нет смысла и удалять WOFF из старых проектов. Если вы подключали WOFF2 раньше WOFF внутри @font-face — и порядок здесь важен — то браузер просто скачает и подключит WOFF2-версию.

И если однажды вы, как и я, обнаружите себя перед папкой, полной файлов WOFF2, знайте, что WOFF — уже всё.

CSS
  • 23 сентября 2023
Трясём пароль с помощью CSS

Трясём пароль с помощью CSS

Знаете момент, когда всё на сайте уже сделано, и хочется добавить какую-нибудь маленькую незаметную фишку? Мы тоже знаем, поэтому давайте просто потрясём поле пароля, когда пользователь ввёл неверный пароль. Как на Маке.

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Вот что получится в итоге:

Читать дальше
CSS
  • 7 сентября 2023