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

Подкаст 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

Определяет источник шрифта, локальный или удаленный. Это необходимо для правила @font-face . Объединение url() и local() в src — это распространенная стратегия, в которой используется локальный шрифт, если он доступен, с возвратом к удаленному файлу шрифта в качестве запасного варианта. Браузеры расставляют приоритеты ресурсов в зависимости от порядка объявления, поэтому local() обычно должен предшествовать url() .

unicode-range

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

Описание

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

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

Разница между @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 недоступен.

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

Используйте font-family , чтобы изменить шрифт вашего текста.

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

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

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

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

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

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

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

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

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

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

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

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

Используйте 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 MDN, чтобы узнать, как упорядочить эти свойства.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Используйте 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 нашего модуля «Тени» .

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

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

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

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

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

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

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

Ресурсы

• Рекомендации по использованию шрифтов посвящены импорту шрифтов, рендерингу шрифтов и другим рекомендациям по использованию шрифтов в Интернете.
• MDN Основные стили текста и шрифтов .