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

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

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

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

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

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

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

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

Практические примеры и советы будут предоставлены повсюду, чтобы укрепить ваше понимание и применение этих методов CSS.

Правило @font-face

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

Описание

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

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

Формат MIME-тип
TrueType font/ttf
OpenType font/otf
Открытый веб-формат шрифта font/woff
Формат веб-открытого шрифта 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.
  • Фаерфокс: 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.
  • Фаерфокс: 1.
  • Сафари: 1.

Source

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

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

Browser Support

  • Хром: 2.
  • Край: 12.
  • Фаерфокс: 1.
  • Сафари: 1.

Source

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

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

Ключевые слова lighter и bolder рассчитываются относительно родительского элемента. См. «Значение относительных весов» MDN для получения удобной диаграммы, показывающей, как определяется это значение.

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

Browser Support

  • Хром: 1.
  • Край: 12.
  • Фаерфокс: 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.
  • Фаерфокс: 1.
  • Сафари: 1.

Source

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

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

Browser Support

  • Хром: 1.
  • Край: 12.
  • Фаерфокс: 1.
  • Сафари: 1.

Source

Используйте letter-spacing , чтобы контролировать количество горизонтального пространства между символами в тексте. This property accepts length values such as em , px , and rem .

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

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

Browser Support

  • Хром: 1.
  • Край: 12.
  • Фаерфокс: 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 .

Ознакомьтесь со статьей font MDN, чтобы узнать, как упорядочить эти свойства.

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

Browser Support

  • Хром: 1.
  • Край: 12.
  • Фаерфокс: 1.
  • Сафари: 1.

Source

Используйте text-transform , чтобы изменить заглавные буквы текста без необходимости изменения основного HTML. Это свойство принимает следующие значения ключевых слов: uppercase , lowercase и capitalize .

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

Browser Support

  • Хром: 1.
  • Край: 12.
  • Фаерфокс: 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.
  • Фаерфокс: 1.
  • Сафари: 1.

Source

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

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

Browser Support

  • Хром: 1.
  • Край: 12.
  • Фаерфокс: 7.
  • Сафари: 1.3.

Source

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

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

Browser Support

  • Хром: 1.
  • Край: 12.
  • Фаерфокс: 1.
  • Сафари: 1.

Source

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

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

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

Browser Support

  • Хром: 1.
  • Край: 12.
  • Фаерфокс: 15.
  • Сафари: 3.

Source

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

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

Browser Support

  • Хром: 1.
  • Край: 12.
  • Фаерфокс: 1.
  • Сафари: 1.

Source

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

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

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

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

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

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

Browser Support

  • Хром: 2.
  • Край: 12.
  • Фаерфокс: 1.
  • Сафари: 1.

Source

Используйте direction , чтобы установить направление текста: ltr (слева направо, по умолчанию) или rtl (справа налево). Some languages like Arabic, Hebrew, or Persian are written right to left, so direction: rtl should be used. Для английского и всех других языков с письмом слева направо используйте direction: ltr .

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

Browser Support

  • Хром: 48.
  • Край: 12.
  • Фаерфокс: 41.
  • Сафари: 10.1.

Source

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

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

Browser Support

  • Хром: 48.
  • Край: 79.
  • Фаерфокс: 41.
  • Сафари: 14.

Source

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

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

Browser Support

  • Хром: 2.
  • Край: 12.
  • Фаерфокс: 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.
  • Фаерфокс: 1.
  • Сафари: 1.

Source

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

::selection

Browser Support

  • Хром: 1.
  • Край: 12.
  • Фаерфокс: 62.
  • Сафари: 1.1.

Source

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

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

вариант шрифта

Browser Support

  • Хром: 1.
  • Край: 12.
  • Фаерфокс: 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 ?

helvetica
serif
italic
sans-serif
monospace
sci-fi

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

font-style: capitals;
text-transform: capitalize;
text-case: capitalize;
font-variant: capitalize;
text-capitalize: true;

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

Истинный
ЛОЖЬ

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

line-height
baseline-distance
line-spacing
leading

Ресурсы