- Как оформить текст: 11 главных CSS-свойств
- Сменить шрифт
- Изменить цвет и размер текста
- Добавить жирность
- Сделать текст курсивным
- Преобразовать текст
- Добавить подчёркивание
- Создать тень
- Выровнять текст
- Изменить высоту строки и межбуквенное расстояние
- Нюансы
- Рекомендации
- Материалы по теме
- Свойства текста
- Свойства шрифта
- Свойства текста
- font — family
- Пример
- Как понять
- Как пишется
- Значения
- Ещё пример
- Подсказки
- На практике
- Алёна Батицкая советует
Как оформить текст: 11 главных CSS-свойств
У любого текстового элемента есть свои стили по умолчанию. Заголовки крупные и жирные, текст в абзацах нормального размера и начертания, а ссылки обычно синие и подчёркнутые снизу.
Каждый из этих элементов можно стилизовать по-своему, например, поменять размер, начертание или цвет. Давайте посмотрим, как это сделать.
💡 Для каждого стиля мы подготовили пример в CodePen — попробуйте поменять значения и посмотрите, как изменится текст.
Сменить шрифт
Чтобы изменить шрифт элемента, используйте CSS-свойство font-family :
Первым указывается шрифт, который вы хотите добавить. После него через запятую идут альтернативные шрифты. Например, если на компьютере у посетителя сайта не установлен шрифт Roboto, браузер использует шрифт Arial.
Изменить цвет и размер текста
Цвет текста задаётся с помощью свойства color . Оно принимает значения в различных форматах: можно написать название цвета ( red , blue ), шестнадцатеричное значение ( #ff0000 , #00f ) или функцию rgb() , чтобы задать цвет с помощью трёх чисел.
Размер текста меняется свойством font-size . Оно принимает значения в пикселях ( px ), процентах ( % ) и других единицах измерения.
Добавить жирность
Свойство font-weight задаёт жирность текста. Оно принимает два вида значений.
Численные: от 100 до 900 . Например, 400 — обычный шрифт, а 700 — полужирный.
Ключевые слова: normal — обычный шрифт, bold — полужирный, bolder — жирнее, чем текущий, lighter — менее жирный шрифт по сравнению с текущим.
See the Pen Untitled by Feizerr on CodePen.
Сделать текст курсивным
Для этого есть свойство font-style . По умолчанию у него стоит значение normal , то есть текст обычный, без курсива. Чтобы поменять начертание, используйте:
Оба значения создают похожий эффект — текст выглядит курсивным, но есть и разница. Если очень упростить, то italic и oblique немного отличаются в начертании. А ещё не у всех шрифтов есть специальная курсивная версия. В таких случаях oblique делает текст похожим на курсив.
See the Pen Как сделать курсивный текст by Feizerr on CodePen.
Преобразовать текст
Свойство text-transform меняет регистр текста. Оно принимает значения:
- none — без изменений, значение по умолчанию;
- uppercase — все буквы становятся прописными;
- lowercase — все буквы становятся строчными;
- capitalize — первая буква каждого слова находится в верхнем регистре.
See the Pen Как изменить text-decoration by Feizerr on CodePen.
Добавить подчёркивание
Свойство text-decoration добавляет тексту декоративные эффекты:
- overline создаёт линию над текстом,
- line-through делает текст зачёркнутым,
- underline добавляет подчёркивание.
По умолчанию у свойства стоит значение 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 управляет расстоянием между символами.
See the Pen Как изменить высоту строки by Feizerr on CodePen.
Нюансы
- У некоторых шрифтов нет жирного и курсивного варианта.
- Свойство text-shadow делает текст эффектным, но слишком насыщенные тени могут усложнить чтение текста или создать плохой контраст.
- Слишком большое или маленькое значение line-height и letter-spacing может нарушить интервалы между буквами и строками.
- При изменении размера шрифта ( font-size ) следует учитывать, что очень мелкий и крупный текст может плохо отображаться или стать нечитабельным.
Рекомендации
Тестируйте вёрстку. Проверяйте, как шрифты отображаются на разных устройствах и браузерах. Некоторые шрифты могут отображаться по-разному на разных платформах.
Используйте стили осторожно. Смена регистра, курсив и жирный текст помогают выделить важный контент, расставляют акценты в тексте. Используйте их умеренно, потому что крупные фрагменты текста, написанного капсом или курсивом, лишь отвлекают пользователя. Акценты теряются, и текст выглядит неаккуратно.
Помните о доступности. Используйте подходящие значения font-weight — слишком мелкий или крупный текст плохо читается. Подбирайте контрастные цвета для текстов.
Используйте несколько шрифтов. Некоторые шрифты могут быть недоступны, поэтому важно указывать альтернативные варианты.
Соблюдайте авторское право. У каждого шрифта есть лицензия, которая описывает, в каких случаях можно использовать шрифт, а в каких нельзя. Например, какие-то варианты нельзя использовать в коммерческих проектах, а какие-то предназначены только для веба или печати. Поэтому нужно внимательно читать лицензию перед загрузкой понравившегося шрифта — вдруг он не подходит под ваши цели.
Материалы по теме
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Свойства текста
С помощью CSS можно определять стиль и вид текста. Аналогично тому, что используется тег , задающий свойства шрифта, но стили обладают большими возможностями и позволяют сократить код HTML.
Свойства шрифта
Изменение начертания шрифта и его размера происходит через свойства CSS, которые описаны в табл. 1.
Свойство | Значение | Описание | Пример |
---|---|---|---|
font-family | имя шрифта | Задает список шрифтов | P |
font-style | normal italic oblique | Нормальный шрифт Курсив Наклонный шрифт | P |
font-variant | normal small-caps | Капитель (особые прописные буквы) | P |
font-weight | normal lighter bold bolder 100–900 | Нормальная жирность Светлое начертание Полужирный Жирный 100 — светлый шрифт, 900 — самый жирный | P |
font-size | normal pt px % | нормальный размер пункты пикселы проценты | font-size: normal font-size: 12pt font-size: 12px font-size: 120% |
В примере 1 показано использование параметров при работе со шрифтами.
Пример 1. Задание свойств шрифта с помощью CSS
Заголовок
Обычный текст
Ниже приведен результат данного примера (рис. 1).
Рис. 1. Вид текста после применения стилей
В табл. 2 приведены некоторые стилевые параметры для работы с текстом и результат их применения.
Пример | Пример | Пример | Пример | Пример |
font-family: Verdana, sans-serif; font-size: 120%; font-weight: light | font-size: large; font-weight: bold | font-family: Arial, sans-serif; font-size: x-small; font-weight: bold | font-variant: small-caps | font-style: italic; font-weight: bold |
Свойства текста
Кроме изменения параметров шрифтов, можно управлять и свойствами всего текста. Значения свойств приведены в табл. 3.
Свойство | Значение | Описание | Пример |
---|---|---|---|
line-height | normal множитель значение % | Интерлиньяж (межстрочный интервал) | line-height: normal line-height: 1.5 line-height: 12px line-height: 120% |
text-decoration | none underline overline line-through blink | Убрать все оформление Подчеркивание Линия над текстом Перечеркивание Мигание текста | text-decoration: none |
text-transform | none capitalize uppercase lowercase | Убрать все эффекты Начинать С Прописных ВСЕ ПРОПИСНЫЕ все строчные | text-transform: capitalize |
text-align | left right center justify | Выравнивание текста | text-align: justify |
text-indent | значение % | Отступ первой строки | text-indent: 15px; text-indent: 10% |
Ниже, в табл. 4 приведены некоторые параметры текста и результат их применения.
Пример: и это все о нем | Пример: текст по центру | Пример: Это не ссылка, а просто текст | Пример: отступ первой строки | Пример: полуторный межстрочный интервал |
text-transform: capitalize | text-align:center | text-decoration: underline | text-indent: 20px | line-height: 1.5 |
font — family
С помощью font — family можно задать семейство шрифта, которым будет написан текст. Можно прописать конкретный шрифт, например «Arial». А можно задать желаемый тип шрифта: например, с засечками serif или без засечек sans — serif .
Пример
Скопировать ссылку «Пример» Скопировано
Допустим, мы хотим, чтобы текст был набран шрифтом PT Sans. Если такой шрифт не установлен у пользователя, то пускай откроется в Arial. Если и такого нет, то пусть будет стандартный шрифт без засечек:
body font-family: "PT Sans", "Arial", sans-serif;>
body font-family: "PT Sans", "Arial", sans-serif; >
Как понять
Скопировать ссылку «Как понять» Скопировано
«PT Sans», «Arial», «Times New Roman» — это примеры семейств шрифтов. С помощью font — family можно задать любой шрифт для любого текстового элемента на странице.
Нужно учесть только то, что шрифты хранятся у пользователя на компьютере. Поэтому, если ты используешь шрифт, которого нет у пользователя, то браузер будет использовать стандартный шрифт.
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Обычно в font — family задают сразу несколько шрифтов, перечисляя их через запятую. На первом месте ставят самый редкий шрифт из тех, что хотят использовать для этого элемента. Затем — похожий, но более распространённый шрифт. В самом конце — желаемый тип шрифта. Браузер проходит по списку слева направо и использует первый найденный на компьютере шрифт.
Значения
Скопировать ссылку «Значения» Скопировано
- Имя шрифта — шрифт, который будет использоваться на странице. Например, Times или Helvetica.
- Семейство шрифтов — прописывается последним на случай, если ни одного из шрифтов нет на компьютере пользователя:
- serif — шрифт с засечками, например, «Times».
- sans — serif — шрифт без засечек, например, «Arial».
- monospace — моноширинные шрифты с одинаковой шириной каждого символа. Похожи на текст, набранный на печатной машинке. Например, шрифт «Courier».
- cursive — курсивный шрифт или italic.
- fantasy — декоративный шрифт.
- system — ui — использует стандартный шрифт на устройстве пользователя.
Ещё пример
Скопировать ссылку «Ещё пример» Скопировано
Зададим разные шрифты для заголовков и для основного текста:
Этот заголовок написан шрифтом Roboto без засечек
А параграф — шрифтом Roboto Slab с засечками.
Для второго заголовка установлено семейство sans-serif
Семейство шрифтов этого параграфа указано как serif — это шрифт с засечками,
установленный в системе по умолчанию.h1>Этот заголовок написан шрифтом Roboto без засечекh1> p>А параграф — шрифтом Roboto Slab с засечками.p> div class="generic"> h2>Для второго заголовка установлено семейство sans-serifh2> p>Семейство шрифтов этого параграфа указано как serif — это шрифт с засечками, установленный в системе по умолчанию.p> div>
h1 font-family: Roboto, Geneva, Arial, Helvetica, sans-serif;> p font-family: "Roboto Slab", Georgia, "Times New Roman", Times, serif;> .generic h2 font-family: sans-serif;> .generic p font-family: serif;>
h1 font-family: Roboto, Geneva, Arial, Helvetica, sans-serif; > p font-family: "Roboto Slab", Georgia, "Times New Roman", Times, serif; > .generic h2 font-family: sans-serif; > .generic p font-family: serif; >
Подсказки
Скопировать ссылку «Подсказки» Скопировано
💡 Мы советуем использовать не больше трёх разных семейств шрифтов на одной странице. Например, один для заголовков, другой для обычного текста и третий для подписей.
💡 Не забывай добавлять желаемый тип шрифта ( serif , sans — serif или другой), так как нет гарантий, что нужный вам шрифт найдётся на компьютере пользователя.
На практике
Скопировать ссылку «На практике» Скопировано
Алёна Батицкая советует
Скопировать ссылку «Алёна Батицкая советует» Скопировано
🛠 Если в макете используется один из нестандартных шрифтов, то вам потребуется подключить его в свою вёрстку при помощи свойства @font — face .
🛠 Всегда указывай несколько вариантов шрифтов в следующем порядке:
Это нужно на случай, если кастомный шрифт по какой-то причине не загрузился на устройстве пользователя. Если не указывать альтернативу (так называемый фолбэк), то при незагрузке кастомного шрифта дизайн страницы скорее всего полностью сломается. Если указать альтернативный системный шрифт, максимально близкий к кастомному по внешнему виду, то дизайн останется прежним 🎉
Семейство шрифтов указывают на случай, если ни кастомный шрифт не загрузился, ни системный шрифт не нашёлся в системе (такое возможно, поскольку в разных ОС разный набор шрифтов).