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

Подкаст 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-типы шрифтов

Формат 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 недоступен.

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

Поддержка браузера

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

Источник

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

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

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

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

Поддержка браузера

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

Источник

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

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

Поддержка браузера

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

Источник

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

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

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

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

Поддержка браузера

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

Источник

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

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

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

Поддержка браузера

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

Источник

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

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

Поддержка браузера

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

Источник

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

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

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

Поддержка браузера

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

Источник

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

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

Поддержка браузера

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

Источник

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

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

Поддержка браузера

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

Источник

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

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

Поддержка браузера

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

Источник

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

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

Поддержка браузера

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

Источник

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

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

Поддержка браузера

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

Источник

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

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

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

Поддержка браузера

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

Источник

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

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

Поддержка браузера

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

Источник

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

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

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

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

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

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

Поддержка браузера

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

Источник

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

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

Поддержка браузера

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

Источник

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

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

Поддержка браузера

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

Источник

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

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

Поддержка браузера

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

Источник

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

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

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

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

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

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

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

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

Поддержка браузера

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

Источник

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

::selection

Поддержка браузера

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

Источник

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

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

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

Поддержка браузера

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

Источник

Свойство 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
Правильный!

Ресурсы