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

Подкаст CSS - 036: Текст и типографика

Текст является одним из основных строительных блоков Интернета.

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

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

В этом модуле мы начнем с правила @font-face , которое позволяет импортировать пользовательские шрифты на ваши веб-страницы. Это гарантирует, что у вас будет именно та типографика, которая вам нужна, независимо от установленных пользователем шрифтов.

После этого мы рассмотрим основные свойства шрифтов CSS, включая font-family , font-style , font-weight и font-size . Эти основы закладывают основу для управления текстом как для стиля, так и для читабельности.

Мы также коснемся свойств, специфичных для абзацев, таких как text-indent и word-spacing , а затем рассмотрим более сложные темы, такие как переменные шрифты и псевдоэлементы, которые еще больше улучшают ваш типографский контроль.

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

Правило @font-face

@font-face CSS at-rule играет важную роль в веб-дизайне, позволяя вам указывать и использовать пользовательские шрифты для отображения текста. Прелесть @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
Определяет источник шрифта, локальный или удаленный. Это требуется для правила @font-face . Объединение url() и local() в src является распространенной стратегией, которая использует локальный шрифт, если он доступен, возвращаясь к удаленному файлу шрифта в качестве резерва. Браузеры приоритизируют ресурсы на основе порядка объявления, поэтому local() обычно должен предшествовать url() .
unicode-range
Ограничивает символы, для которых следует использовать этот шрифт.

Описание

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

Типы шрифтов MIME

Формат MIME-тип
TrueType font/ttf
OpenType font/otf
Формат веб-шрифта Open font/woff
Формат веб-шрифта Open 2 font/woff2

Разница между @font-face и font-family

В CSS @font-face и font-family часто путают, но они служат разным целям.

Как мы уже обсуждали, @font-face — это правило, используемое для определения любых пользовательских шрифтов, которые вы хотите использовать в своем веб-приложении. Оно сообщает браузеру, где загрузить шрифт, как отобразить его во время загрузки (с помощью свойства font-display ) и указывает, какое подмножество символов загрузить (с помощью unicode-range ).

Напротив, font-family — это свойство CSS, используемое в правиле CSS для назначения определенного шрифта или списка шрифтов элементу. Шрифты, перечисленные в font-family , могут быть веб-безопасными шрифтами, системными шрифтами или пользовательскими шрифтами, определенными с помощью @font-face .

Подводя итог, @font-face объявляет шрифт и дает ему имя, а font-family применяет этот объявленный шрифт к элементам HTML.

Вот пример использования обоих вариантов:

<table>
  <thead>
    <tr>
      <th><p><pre>
@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 в качестве резервного варианта, если "CustomFont" недоступен.

Изменить шрифт

Browser Support

  • Хром: 1.
  • Край: 12.
  • Firefox: 1.
  • Сафари: 1.

Source

Используйте font-family для изменения шрифта текста.

Свойство font-family принимает список строк, разделенных запятыми, ссылающихся либо на определенные , либо на общие семейства шрифтов. Определенные семейства шрифтов — это строки в кавычках, например «Helvetica», «EB Garamond» или «Times New Roman». Общие семейства шрифтов — это ключевые слова, например serif , sans-serif и monospace ( полный список параметров можно найти на MDN ). Браузер отобразит первую доступную гарнитуру из предоставленного списка.

При использовании font-family следует указать по крайней мере одно общее семейство шрифтов на случай, если в браузере пользователя нет ваших предпочитаемых шрифтов. Как правило, резервное общее семейство шрифтов должно быть похоже на ваши предпочитаемые шрифты: если используется font-family: "Helvetica" (семейство шрифтов без засечек), ваш резерв должен быть sans-serif для соответствия.

Используйте курсивные и наклонные шрифты.

Browser Support

  • Хром: 1.
  • Край: 12.
  • Firefox: 1.
  • Сафари: 1.

Source

Используйте font-style , чтобы указать, должен ли текст быть курсивом. font-style принимает одно из следующих ключевых слов: normal , italic и oblique .

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

Browser Support

  • Хром: 2.
  • Край: 12.
  • Firefox: 1.
  • Сафари: 1.

Source

Используйте font-weight для установки «жирности» текста. Это свойство принимает значения ключевых слов ( normal , bold ), относительные значения ключевых слов ( lighter , bolder ) и числовые значения ( 100 до 900 ).

Ключевые слова normal и bold эквивалентны числовым значениям 400 и 700 соответственно.

Ключевые слова lighter и bolder рассчитываются относительно родительского элемента. См. MDN's Meaning of Relative Weights для удобной диаграммы, показывающей, как определяется это значение.

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

Browser Support

  • Хром: 1.
  • Край: 12.
  • Firefox: 1.
  • Сафари: 1.

Source

Используйте font-size для управления размером текстовых элементов. Это свойство принимает значения длины, проценты и несколько ключевых значений.

В дополнение к значениям длины и процентам, font-size принимает некоторые абсолютные значения ключевых слов ( xx-small , x-small , small , medium , large , x-large , xx-large ) и несколько относительных значений ключевых слов ( smaller , larger ). Относительные значения относятся к font-size родительского элемента.

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

Browser Support

  • Хром: 1.
  • Край: 12.
  • Firefox: 1.
  • Сафари: 1.

Source

Используйте line-height для указания высоты каждой строки в элементе. Это свойство принимает либо число, длину, процент или ключевое слово normal . Обычно рекомендуется использовать число вместо длины или процента, чтобы избежать проблем с наследованием.

Изменить расстояние между символами

Browser Support

  • Хром: 1.
  • Край: 12.
  • Firefox: 1.
  • Сафари: 1.

Source

Используйте letter-spacing для управления горизонтальным пространством между символами в тексте. Это свойство принимает значения длины, такие как em , px и rem .

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

Изменить пробел между словами

Browser Support

  • Хром: 1.
  • Край: 12.
  • Firefox: 1.
  • Сафари: 1.

Source

Используйте 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 .

Подробности заказа этих свойств см. в статье MDN font .

## Изменить регистр текста

Browser Support

  • Хром: 1.
  • Край: 12.
  • Firefox: 1.
  • Сафари: 1.

Source

Используйте [`text-transform`](https://developer.mozilla.org/docs/Web/CSS/text-transform) для изменения регистра вашего текста без необходимости изменения базового HTML. Это свойство принимает следующие значения ключевых слов: `uppercase`, `lowercase` и `capitalize`.

Добавляйте подчеркивания, надчерки и сквозные линии к тексту

Browser Support

  • Хром: 1.
  • Край: 12.
  • Firefox: 1.
  • Сафари: 1.

Source

Используйте 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 является сокращением для всех предыдущих свойств.

Добавьте отступ к тексту

Browser Support

  • Хром: 1.
  • Край: 12.
  • Firefox: 1.
  • Сафари: 1.

Source

Используйте text-indent , чтобы добавить отступ к блокам текста. Это свойство принимает либо длину (например, 10px , 2em ), либо процент от ширины содержащего блока.

Работа с переполненным или скрытым контентом

Browser Support

  • Хром: 1.
  • Край: 12.
  • Firefox: 7.
  • Сафари: 1.3.

Source

Используйте text-overflow , чтобы указать, как отображается скрытый контент. Есть два варианта: clip (по умолчанию), который обрезает текст в точке переполнения; и ellipsis , который отображает многоточие (…) в точке переполнения.

Контроль пробелов

Browser Support

  • Хром: 1.
  • Край: 12.
  • Firefox: 1.
  • Сафари: 1.

Source

Свойство white-space используется для указания того, как следует обрабатывать пробелы в элементе. Для получения более подробной информации ознакомьтесь со статьей white-space на MDN .

white-space: pre может быть полезен для рендеринга ASCII-графики или тщательно отступленных блоков кода.

Контролируйте, как слова ломаются

Browser Support

  • Хром: 1.
  • Край: 12.
  • Firefox: 15.
  • Сафари: 3.

Source

Используйте word-break , чтобы изменить способ «разрыва» слов, когда они выходят за пределы строки. По умолчанию браузер не будет разбивать слова. Использование ключевого слова break-all для word-break даст указание браузеру разбивать слова по отдельным символам, если это необходимо.

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

Browser Support

  • Хром: 1.
  • Край: 12.
  • Firefox: 1.
  • Сафари: 1.

Source

Используйте text-align для указания горизонтального выравнивания текста в элементе block или table-cell. Это свойство принимает ключевые значения left , right , start , end , center , justify и match-parent .

Значения left и right выравнивают текст по левой и правой стороне блока соответственно.

Используйте start и end для представления местоположения начала и конца строки текста в текущем режиме письма. Таким образом, start сопоставляется с left в английском языке и с right в арабском письме, которое пишется справа налево (RTL). Это логические выравнивания, узнайте больше в нашем модуле логических свойств .

Используйте функцию center , чтобы выровнять текст по центру блока.

Значение justify упорядочивает текст и автоматически изменяет интервалы между словами таким образом, чтобы текст выравнивался по левому и правому краям блока.

Управление переносом текста

Browser Support

  • Хром: 114.
  • Край: 114.
  • Firefox: 121.
  • Сафари: 17.4.

Source

Используйте text-wrap , чтобы изменить способ переноса текста внутри элемента.

Ключевые слова, принятые для этого свойства, включают wrap , nowrap , balance и stable . Значение по умолчанию — wrap , что минимизирует переполнение путем переноса текста между строками вдоль обычных пробелов и разрывов слов.

Вы можете использовать ключевое слово nowrap , чтобы добиться прямо противоположного результата и предотвратить разрыв текста между строками, что может привести к переполнению.

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

Ключевое слово stable работает аналогично wrap , но предназначено для использования с текстом contenteditable . Если установлено text-wrap: stable , строки над редактируемым контентом не будут смещаться в процессе.

Иногда длинные строки без четкой точки разрыва могут переполнять контейнеры. Чтобы контролировать, как этот тип текста разрывается, используйте overflow-wrap .

Browser Support

  • Хром: 23.
  • Край: 18.
  • Firefox: 49.
  • Сафари: 7.

Source

Ключевые слова, которые вы можете использовать для этого свойства, это normal , break-word и anywhere . Значение по умолчанию — normal и не будет переносить текст на следующую строку, если только он не содержит пробелов или естественных точек разрыва.

Значения anywhere и break-word добавляют точки останова в любом месте внутри строки, чтобы предотвратить переполнение. Ключевые слова различаются по тому, как они реагируют на внутренний или явный размер min-content . Ключевое слово anywhere допускает все возможные возможности мягкого разрыва. Значение break-word не допускает и сделает текст таким же длинным, как самое длинное слово.

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

Browser Support

  • Хром: 2.
  • Край: 12.
  • Firefox: 1.
  • Сафари: 1.

Source

Используйте direction для задания направления текста: ltr (слева направо, по умолчанию) или rtl (справа налево). Некоторые языки, такие как арабский, иврит или персидский, пишутся справа налево, поэтому следует использовать direction: rtl . Для английского и всех других языков с письмом слева направо используйте direction: ltr .

Изменить поток текста

Browser Support

  • Хром: 48.
  • Край: 12.
  • Firefox: 41.
  • Сафари: 10.1.

Source

Используйте writing-mode для изменения способа размещения и расположения текста. Значение по умолчанию — horizontal-tb , но вы также можете установить writing-mode на vertical-lr или vertical-rl для текста, который вы хотите разместить горизонтально.

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

Browser Support

  • Хром: 48.
  • Край: 79.
  • Firefox: 41.
  • Сафари: 14.

Source

Используйте text-orientation для указания ориентации символов в тексте. Допустимые значения этого свойства — mixed и upright . Это свойство имеет значение только в том случае, если writing-mode установлено на что-то, отличное от horizontal-tb .

Добавить тень к тексту

Browser Support

  • Хром: 2.
  • Край: 12.
  • Firefox: 3.5.
  • Сафари: 1.1.

Source

Используйте text-shadow , чтобы добавить тень к тексту. Это свойство ожидает три длины ( x-offset , y-offset и blur-radius ) и цвет.

Чтобы узнать больше, ознакомьтесь с разделом text-shadow нашего модуля «Тени» .

Вариативные шрифты

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

Roboto Flex в случайных комбинациях ширины и веса

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

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

::first-letter и ::first-line псевдоэлементы

Browser Support

  • Хром: 1.
  • Край: 12.
  • Firefox: 1.
  • Сафари: 1.

Source

Псевдоэлементы ::first-letter и ::first-line указывают на первую букву и первую строку текстового элемента соответственно.

::selection псевдоэлемента

Browser Support

  • Хром: 1.
  • Край: 12.
  • Firefox: 62.
  • Сафари: 1.1.

Source

Используйте псевдоэлемент ::selection для изменения внешнего вида выделенного пользователем текста.

При использовании этого псевдоэлемента можно использовать только определенные свойства CSS: color , background-color , text-decoration , text-shadow , stroke-color , fill-color , stroke-width .

font-variant

Browser Support

  • Хром: 1.
  • Край: 12.
  • Firefox: 1.
  • Сафари: 1.

Source

Свойство font-variant — это сокращение для ряда свойств CSS, которые позволяют вам выбирать варианты шрифтов, такие как small-caps и slashed-zero . Свойства CSS, которые включает это сокращение, — это font-variant-alternates , font-variant-caps , font-variant-east-asian , font-variant-ligatures и font-variant-numeric . Ознакомьтесь со ссылками на каждое свойство для получения более подробной информации об его использовании.

Проверьте свое понимание

Проверьте свои знания типографики в Интернете

Какое из следующих ключевых слов можно использовать в качестве универсального резервного варианта font-family ?

serif
Правильный!
monospace
Правильный!
italic
Попробуйте еще раз. italic — это допустимое ключевое слово для font-style , а не font-family .
sci-fi
Попробуйте еще раз. Тем не менее, fantasy — допустимый общий резервный вариант для font-family .
sans-serif
Правильный!
helvetica
Попробуйте еще раз. "Helvetica" — это не общее ключевое слово, а относится к определенному семейству шрифтов.

Какое выражение используется для преобразования первой буквы каждого слова в заглавную? Например This is a sentence. ➡ This Is A Sentence.

text-capitalize: true;
Попробуйте еще раз.
text-case: capitalize;
Попробуйте еще раз.
text-transform: capitalize;
Правильный!
font-style: capitals;
Попробуйте еще раз.
font-variant: capitalize;
Попробуйте еще раз.

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

Истинный
Попробуйте еще раз. text-orientation изменяет поворот букв в строке.
ЛОЖЬ
Правильно! text-orientation изменяет поворот букв в строке. Используйте text-align для выравнивания текста по левому краю, правому краю или по центру (и многое другое! ).

Какое свойство CSS можно использовать для изменения расстояния между строками текста?

line-spacing
Попробуйте еще раз.
leading
Попробуйте еще раз. Интерлиньяж — правильный термин для обозначения расстояния между строками в типографике, но это недопустимое свойство CSS.
baseline-distance
Попробуйте еще раз.
line-height
Правильный!

Ресурсы