Текст и типографика¶
В этом модуле вы узнаете, как стилизовать текст в Интернете.
CSS подкаст
036: Текст и типографика
Текст — один из основных элементов веб-страниц.
При создании сайта не обязательно придавать тексту стиль: в HTML по умолчанию заложены вполне приемлемые стили.
Однако текст, скорее всего, будет составлять большую часть сайта, поэтому стоит придать ему некоторый стиль. Изменив несколько основных свойств, можно значительно улучшить восприятие текста пользователями!
В этом модуле мы сначала рассмотрим некоторые фундаментальные свойства шрифтов CSS, такие как font-family, font-style, font-weight и font-size. Затем мы рассмотрим свойства, влияющие на абзацы текста, такие как text-indent и word-spacing. В завершение модуля мы рассмотрим некоторые более сложные темы, такие как переменные шрифты и псевдоэлементы.
Изменение шрифта¶
Используйте свойство font-family для изменения начертания шрифта в тексте.
Свойство font-family принимает список строк, разделенных запятыми, относящихся либо к конкретным, либо к общим семействам шрифтов. Конкретные семейства шрифтов — это строки, заключенные в кавычки, такие как "Helvetica", "EB Garamond" или "Times New Roman". Общими семействами шрифтов являются ключевые слова serif, sans-serif и monospace (полный список вариантов). Браузер отобразит первый доступный шрифт из представленного списка.
Когда браузер выбирает шрифт для отображения на основе объявления font-family, он не останавливается на первом доступном шрифте в списке. Вместо этого он выбирает шрифты по одному символу. Если определенный символ не доступен в первом шрифте списка, он переходит к следующему, и так далее.
При использовании font-family необходимо указать хотя бы одно общее семейство шрифтов на тот случай, если в браузере пользователя не установлены предпочитаемые шрифты. Как правило, резервное семейство шрифтов должно быть аналогично предпочитаемым шрифтам: если используется font-family: "Helvetica" (семейство шрифтов sans-serif), запасным должно быть sans-serif, чтобы соответствовать.
Использование курсивных и наклонных шрифтов¶
С помощью font-style можно установить, должен ли текст быть курсивным или нет. font-style принимает одно из следующих ключевых слов: normal, italic и oblique.
В чем разница между italic и oblique?
В шрифтах, которые их поддерживают, font-style: italic обычно представляет собой курсивную версию обычного шрифта. А font-style: oblique отображает наклонную версию обычного шрифта.
Сделать текст жирным¶
Для установки "жирности" текста используйте свойство font-weight. Это свойство принимает значения ключевых слов (normal, bold), относительные значения ключевых слов (lighter, bolder) и числовые значения (от 100 до 900).
Ключевые слова normal и bold эквивалентны числовым значениям 400 и 700 соответственно.
Ключевые слова lighter и bolder вычисляются относительно родительского элемента. Удобную схему, показывающую, как определяется это значение, см. в MDN Meaning of Relative Weights.
Большинство шрифтов, особенно "web-safe", поддерживают только веса 400 (normal) и 700 (bold). При импорте шрифтов с помощью @font-face или @import можно выбрать конкретные веса, которые необходимо подтянуть. Однако непеременные шрифты поддерживают числовые значения font-weight только в сотых долях, например, 100, 200, 300 и т.д. Если вы хотите использовать font-weight: 321 (например), то вам придется использовать Переменный шрифт.
Изменение размера текста¶
Для управления размером текстовых элементов используйте свойство font-size. Это свойство принимает значения длины, процентов и несколько значений ключевых слов.
Кроме значений длины и процентов, font-size принимает некоторые абсолютные значения ключевых слов (xx-small, x-small, small, medium, large, x-large, xx-large) и несколько относительных значений ключевых слов (smaller, larger). Относительные значения относятся к размеру font-size родительского элемента.
В чем разница между em и rem?
В CSS em представляет собой размер шрифта, унаследованный от родительского элемента. Например, font-size: 2em эквивалентен font-size родительского элемента, умноженному на два. rem аналогично, но вместо этого представляет размер шрифта, унаследованный от корневого элемента, т.е. <html>.
Изменение расстояния между строками¶
Используйте свойство line-height для указания высоты каждой строки в элементе. Это свойство может принимать значения: число, длина, процент или ключевое слово normal. Обычно рекомендуется использовать число, а не длину или процент, чтобы избежать проблем с наследованием.
Изменение расстояния между символами¶
Используйте свойство letter-spacing для управления величиной горизонтального пробела между символами в тексте. Это свойство принимает такие значения длины, как em, px и rem.
Обратите внимание, что указанное значение увеличивает естественное пространство между символами. В демонстрационном примере ниже попробуйте выделить отдельную букву, чтобы увидеть размер ее поля и то, как он меняется при изменении letter-spacing.
Изменение пробела между словами¶
Используйте свойство word-spacing для увеличения или уменьшения длины пробела между каждым словом в тексте. Это свойство принимает такие значения длины, как em, px и rem. Обратите внимание, что указанная длина относится к дополнительному пробелу в дополнение к обычному интервалу. Это означает, что word-spacing: 0 эквивалентно word-spacing: normal.
Сокращенное свойство font¶
С помощью свойства font можно задать сразу несколько свойств, связанных со шрифтом. В список возможных свойств входят font-family, font-size, font-stretch, font-style, font-variant, font-weight и line-height.
О том, как упорядочить эти свойства, читайте в font.
Изменение регистра текста¶
Используйте свойство text-transform для изменения заглавной буквы текста без необходимости изменения основного HTML. Это свойство принимает следующие значения ключевых слов: uppercase, lowercase и capitalize.
Добавление подчеркиваний, надстрочных и сквозных линий в текст¶
Используйте text-decoration для добавления линий в текст. Чаще всего используются подчеркивания, но можно добавлять линии над текстом или прямо через него!
Свойство text-decoration является сокращением для более специфических свойств, описанных ниже.
Свойство text-decoration-line принимает ключевые слова underline, overline и line-through. Можно также указать несколько ключевых слов для нескольких строк.
Свойство text-decoration-color задает цвет всех украшений из text-decoration-line.
Свойство text-decoration-style принимает ключевые слова solid, double, dotted, dashed и wavy.
Свойство text-decoration-thickness принимает любые значения длины и устанавливает ширину обводки всех декоративных элементов из text-decoration-line.
Свойство text-decoration является сокращением для всех вышеперечисленных свойств.
Используйте text-underline-position для смещения подчеркивания text-decoration: underline на указанную величину. Это свойство не работает для overline или line-through.
Добавление отступа к тексту¶
Для добавления отступа к текстовым блокам используйте свойство text-indent. Это свойство принимает либо длину (например, 10px, 2em), либо процент от ширины содержащегося блока.
Работа с переполненным или скрытым содержимым¶
Используйте text-overflow для указания способа представления скрытого содержимого. Есть два варианта: clip (по умолчанию), который обрезает текст в месте переполнения, и ellipsis, который отображает многоточие (…) в месте переполнения.
Управление пробелами¶
Свойство white-space используется для указания того, как следует обрабатывать пробельные символы в элементе.
white-space: pre может быть полезен для отображения ASCII art или тщательно вырезанных блоков кода.
Управление разбиением слов¶
Используйте word-break, чтобы изменить способ "разбиения" слов, когда они выходят за границы строки. По умолчанию браузер не разбивает слова. Использование значения ключевого слова break-all для word-break позволит браузеру при необходимости разбивать слова на отдельные символы.
Изменение выравнивания текста¶
Для задания горизонтального выравнивания текста в блоке или таблично-ячеистом элементе используйте свойство text-align. Это свойство принимает значения ключевых слов left, right, start, end, center, justify и match-parent.
Значения left и right выравнивают текст по левой и правой сторонам блока соответственно.
Значения start и end используются для обозначения начала и конца строки текста в текущем режиме записи. Таким образом, start соответствует left в английском языке и right в арабской графике, которая пишется справа налево (RTL). Это логические выравнивания, подробнее об этом можно узнать в модуле logical properties.
Используйте center для выравнивания текста по центру блока.
Значение justify упорядочивает текст и автоматически изменяет интервалы между словами таким образом, чтобы текст выравнивался как по левому, так и по правому краю блока.
Изменение направления текста¶
Используйте direction, чтобы задать направление текста: ltr (слева направо, по умолчанию) или rtl (справа налево). Некоторые языки, такие как арабский, иврит или персидский, пишутся справа налево, поэтому следует использовать direction: rtl. Для английского и всех других языков, пишущих слева направо, следует использовать direction: ltr.
В общем случае вместо direction следует использовать HTML-атрибут dir. Более подробную информацию можно найти в этом обсуждении на StackOverflow.
Изменение обтекания текста¶
Используйте writing-mode для изменения способа обтекания и расположения текста. По умолчанию используется horizontal-tb, но можно также установить writing-mode в vertical-lr или vertical-rl для текста, который должен располагаться горизонтально.
Изменение ориентации текста¶
Используйте свойство text-orientation для указания ориентации символов в тексте. Допустимыми значениями для этого свойства являются mixed и upright. Это свойство актуально только в том случае, если для параметра writing-mode установлено значение, отличное от horizontal-tb.
Добавление тени к тексту¶
Для добавления тени к тексту используйте свойство text-shadow. Это свойство ожидает три длины (x-offset, y-offset и blur-radius) и цвет.
Ознакомьтесь с разделом text-shadow нашего модуля по теням, чтобы узнать больше.
Переменные шрифты¶
Как правило, "обычные" шрифты требуют импорта различных файлов для разных версий шрифта, например, жирного, курсивного или конденсированного. Переменные шрифты — это шрифты, которые могут содержать множество различных вариантов шрифта в одном файле.
Более подробную информацию можно найти в нашей статье о переменных шрифтах.
Псевдоэлементы¶
Ключевые понятия
Псевдоэлемент — это часть элемента, на которую можно нацелиться с помощью ключевых слов CSS без необходимости добавлять дополнительный HTML. Ознакомьтесь с нашим модулем по псевдоэлементам для более глубокого изучения этой темы!
Псевдоэлементы ::first-letter и ::first-line¶
Псевдоэлементы ::first-letter и ::first-line нацелены на первую букву и первую строку текстового элемента соответственно.
Псевдоэлемент ::selection¶
Для изменения внешнего вида выбранного пользователем текста используйте псевдоэлемент ::selection.
При использовании этого псевдоэлемента можно применять только определенные CSS-свойства: color, background-color, text-decoration, text-shadow, stroke-color, fill-color, stroke-width.
font-variant¶
Свойство font-variant — это сокращение для ряда CSS-свойств, позволяющих выбирать такие варианты шрифтов, как small-caps и slashed-zero. К таким CSS-свойствам относятся font-variant-alternates, font-variant-caps, font-variant-east-asian, font-variant-ligatures и font-variant-numeric. Более подробную информацию об использовании каждого свойства можно найти по ссылкам.
Ресурсы¶
- Лучшие методы работы со шрифтами, где рассматриваются вопросы импорта шрифтов, рендеринга шрифтов и другие лучшие методы использования шрифтов в Интернете.
- MDN Основы стилизации текста и шрифтов.
Источник — Text and typography