Вы можете изменять размер и форму текста на веб-странице с помощью ряда свойств.
Семейство шрифтов
Это сам шрифт, такой как Times New Roman, Arial или Verdana.
Браузер пользователя должен быть способен находить указанный вами шрифт, что в большинстве случаев означает, что он должен быть на самом компьютере, поэтому нет особого смысла использовать непонятные шрифты, которые есть только на вашем компьютере.
Существует несколько “безопасных” шрифтов (наиболее часто используемые Arial, Verdana и Times New Roman), но вы можете указать несколько шрифтов, разделённых запятыми.
Цель проста: если у пользователя нет первого указанного вами шрифта, браузер будет просматривать список, пока не найдёт тот, который у него есть. Это полезно, потому что на разных компьютерах иногда установлены разные шрифты.
В строке font-family: arial, helvetica, serif браузер сначала будет искать шрифт Arial. Если браузер не сможет его найти, он будет искать Helvetica, а затем обычный шрифт с засечками.
Примечание: если название шрифта состоит более чем из одного слова, его следует заключить в кавычки, например font-family: «Times New Roman».
Вы можете использовать более широкий выбор шрифтов, чем “безопасные”, используя несколько методов, описанных в руководстве по CSS Advanced, но, если вы только начинаете разбираться в CSS, мы рекомендуем пока придерживаться этого базового стандартного подхода.
Размер шрифта
Свойство font-size задает размер шрифта. Будьте осторожны с этим — текст, такой как заголовки, не должен быть просто HTML-абзацем (p), набранным крупным шрифтом — вам всё равно следует использовать заголовки (h1, h2 и т.д.). Хотя на практике вы могли бы увеличить размер шрифта абзаца больше, чем у заголовка (не рекомендуется для здравомыслящих людей).
Вес шрифта
Свойство font-weight указывает, выделен ли текст жирным шрифтом или нет. Чаще всего это используется как font-weight: bold или font-weight: normal, но другими значениями являются bolder, lighter, 100 200, 300 400 normal (то же, что 500), 600, 700, bold 800 (то же, что 900).
Свойства font-weight, font-style, font-variant и text-transform
Поиграйте с этими значениями веса шрифта, если хотите увидеть их эффект, но имейте в виду, что некоторые старые браузеры немного путаются с чем-либо иным, чем bold и normal поэтому мы рекомендуем придерживаться их, если вы не ниндзя типографики.
Стиль шрифта
Свойство font-style указывает, выделен текст курсивом или нет. Это может быть font-style: italic или font-style: normal.
Свойство text-decoration
Свойство text-decoration указывает, есть ли в тексте линия, проходящая под ним, над ним или через него.
Свойство text-decoration: underline делает то, что вы ожидаете.
Свойство text-decoration: overline помещает линию над текстом.
Свойство text-decoration: line-through проводит линию через текст (“зачеркивание”).
Это свойство обычно используется для оформления ссылок, и вы можете не указывать подчёркивание с помощью text-decoration: none.
Подчёркивания действительно следует использовать только для ссылок. Это общепринятое веб-соглашение, из-за которого пользователи обычно ожидают, что подчёркнутый текст является ссылкой.
Свойство text-transform
Свойство text-transform изменит регистр текста.
Свойство text-transform: capitalize переводит первую букву каждого слова в верхний регистр.
Свойство text-transform: uppercase переводит всё в верхний регистр.
Свойство text-transform: lowercase переводит всё в нижний регистр.
Свойство text-transform: none ─ заглавные буквы не применены.
Итак, некоторые из этих вещей, используемых вместе, могут выглядеть следующим образом:
body { font-family: arial, helvetica, sans-serif; font-size: 14px; } h1 { font-size: 2em; } h2 { font-size: 1.5em; } a { text-decoration: none; } strong { font-style: italic; text-transform: uppercase; }
Интервал между текстом
Прежде чем мы перейдём от этого введения к оформлению текста, бегло взглянем на то, как выделить текст на странице.
Выделение текста с помощью интервалов
Свойства letter-spacing и word-spacing предназначены для интервалов между буквами или словами. Значением может быть длина или normal.
Свойство line-height устанавливает высоту строк в элементе, таком как абзац, без настройки размера шрифта. Это может быть число (которое определяет кратный размер шрифта, поэтому, например, “2” будет в два раза больше размера шрифта), длина, процент или normal.
Свойство text-align выравнивает текст внутри элемента по левому краю, правому краю, центру или по ширине.
Свойство text-indent будет делать отступ в первой строке абзаца, например, на заданную длину или процент. Этот стиль традиционно используется в печатных изданиях, но редко в цифровых носителях, таких как Интернет.
p { letter-spacing: 0.5em; word-spacing: 2em; line-height: 1.5; text-align: center; }
Страницы в тему:
- Следующая страница: Поля и отступы
- Предыдущая страница: Цвета
- Свойство CSS: font-family
- Свойство CSS: font-size
- Свойство CSS: font-weight
- Свойство CSS: font-style
- Свойство CSS: text-decoration
- Свойство CSS: text-transform
- Свойство CSS: letter-spacing
- Свойство CSS: word-spacing
- Свойство CSS: line-height
- Свойство CSS: text-align
- Свойство CSS: text-indent
Примеры CSS^
- Размеры шрифта: используемые font-size
- Размер не имеет значения: изменение размеров по умолчанию
- Семейства шрифтов: списки шрифтов и резервные шрифты с font-family
- Выделено жирным шрифтом, курсивом, регистром и высотой строки: с использованием font-weight, font-style, font-variant, text-transform line-height
- Выделение текста через интервалы: с помощью text-align, text-indent, word-spacing и letter-spacing