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

Подкаст 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 Основные стили текста и шрифтов .