Текст и типографика¶

В этом модуле вы узнаете, как стилизовать текст в Интернете.

CSS подкаст

036: Текст и типографика

Перевод на русскийАнглийский оригинал

Текст — один из основных элементов веб-страниц.

При создании сайта не обязательно придавать тексту стиль: в HTML по умолчанию заложены вполне приемлемые стили.

Однако текст, скорее всего, будет составлять большую часть сайта, поэтому стоит придать ему некоторый стиль. Изменив несколько основных свойств, можно значительно улучшить восприятие текста пользователями!

В этом модуле мы сначала рассмотрим правило @font-face и фундаментальные свойства шрифтов CSS, такие как font-family, font-style, font-weight и font-size. Затем мы рассмотрим свойства, влияющие на абзацы текста, такие как text-indent и word-spacing. В завершение модуля мы рассмотрим некоторые более сложные темы, такие как переменные шрифты и псевдоэлементы.

Правило `@font-face`¶

Правило @font-face подключает собственные шрифты. Источником может быть файл на сервере или шрифт, уже установленный у пользователя.

Синтаксис¶

@font-face {
    font-family: "Trickster";
    src:
        local("Trickster"),
        url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1),
        url("trickster-outline.otf") format("opentype"),
        url("trickster-outline.woff") format("woff");
}

Дескрипторы¶

ascent-override меняет метрику верхнего выноса и пространство над базовой линией.
descent-override меняет нижний вынос и пространство под базовой линией.
font-display управляет показом шрифта в зависимости от статуса загрузки.
font-family даёт шрифту имя для свойств шрифта.
font-stretch задаёт допустимое горизонтальное растяжение одним значением или диапазоном.
font-style задаёт начертание, для наклонных стилей — диапазон углов.
font-weight задаёт насыщенность или диапазон насыщенностей.
font-feature-settings открывает возможности OpenType.
font-variation-settings тонко настраивает вариативные шрифты.
line-gap-override заменяет стандартный межстрочный зазор шрифта.
size-adjust масштабирует контур и метрики.
src указывает источник, локальный или удалённый. Для правила он обязателен. Связка url() и local() — обычный приём: сначала локальный шрифт, затем файл как запасной вариант. Браузер идёт по порядку объявления, поэтому local() обычно ставят перед url().
unicode-range ограничивает набор символов, для которых используется этот шрифт.

Описание¶

@font-face снимает ограничение «безопасными для веба» шрифтами. local() ищет шрифт на устройстве пользователя, и страница не обязательно зависит от сети.

Стратегии совместимости со старыми браузерами описаны в документации дескриптора src. @font-face также можно вкладывать в условные групповые правила CSS.

MIME-типы шрифтов¶

Формат	MIME-тип
TrueType	`font/ttf`
OpenType	`font/otf`
Web Open Font Format	`font/woff`
Web Open Font Format 2	`font/woff2`

Веб-шрифты подчиняются политике одного источника. Для загрузки с другого источника настраивают HTTP-заголовки доступа.

@font-face нельзя объявлять внутри блока селектора.

Чем `@font-face` отличается от `font-family`¶

Правила часто путают, хотя задачи у них разные.

@font-face объявляет собственный шрифт: откуда его скачать, как показывать во время загрузки (font-display) и какой набор символов загружать (unicode-range).

font-family — свойство внутри правила. Оно назначает элементу шрифт или список шрифтов: системный, «безопасный для веба» или объявленный через @font-face.

Коротко: @font-face объявляет шрифт и даёт ему имя, а font-family применяет это имя к элементам.

@font-face {
    font-family: "CustomFont";
    src: url("customfont.woff2") format("woff2");
}

body {
    font-family: "CustomFont", Arial, sans-serif;
}

Здесь @font-face описывает CustomFont и говорит браузеру, где его взять. font-family применяет его к body, а если файла нет, запасным будет Arial.

Изменение шрифта¶

Используйте свойство 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 нашего модуля по теням, чтобы узнать больше.

Переменные шрифты¶

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

Roboto Flex в произвольных сочетаниях ширины и веса

Более подробную информацию можно найти в нашей статье о переменных шрифтах.

Псевдоэлементы¶

Ключевые понятия

Псевдоэлемент — это часть элемента, на которую можно нацелиться с помощью ключевых слов 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