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

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

Примечание. Стратегии совместимости и более подробную информацию о старых браузерах см. в документации по дескриптору src . Вы также можете вложить @font-face в правила условной группы CSS.

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

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

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

Примечание. @font-face нельзя объявить внутри блока селектора CSS.

Разница между @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 вы должны указать хотя бы одно общее семейство шрифтов на случай, если в браузере пользователя нет предпочитаемых вами шрифтов. Как правило, семейство резервных универсальных шрифтов должно быть похоже на предпочитаемые вами шрифты: если вы используете font-family: "Helvetica" (семейство шрифтов без засечек), то резервным шрифтом должен быть соответствующий sans-serif .

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

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

• 1
• 12
• 1
• 1

Источник

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

Примечание. Вопрос. В чем разница между italic и oblique ? О: В поддерживающих его шрифтах font-style: italic обычно представляет собой курсивную версию обычного шрифта. font-style: oblique отображает наклонную версию обычного шрифта.

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

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

• 2
• 12
• 1
• 1

Источник

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

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

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

Примечание. Большинство шрифтов, особенно веб-безопасных , поддерживают только толщину 400 ( normal ) и 700 ( bold ). При импорте шрифтов с помощью @font-face или @import вы можете выбрать конкретную толщину, которую хотите использовать. Тем не менее, неизменяемые шрифты поддерживают только числовые значения font-weight в диапазоне 100, например 100 , 200 , 300 и т. д. Если вы хотите использовать font-weight: 321 (например), вам придется использовать переменный шрифт .

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

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

• 1
• 12
• 1
• 1

Источник

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

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

Примечание: Вопрос: В чем разница между em и rem ? О: В CSS em представляет font-size , унаследованный от родительского элемента. Например, font-size: 2em эквивалентен font-size родительского элемента, умноженному на два. rem аналогичен, но вместо этого представляет font-size , унаследованный от корневого элемента , например <html> .

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

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

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

Примечание. Используйте text-underline-position , чтобы сместить подчеркивание text-decoration: underline на указанную величину. Это свойство не работает для overline или line-through .

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

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

• 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 .

Внимание: Как правило, вам следует использовать атрибут HTML dir вместо direction . Дополнительную информацию можно найти в обсуждении StackOverflow .

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

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

• 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 в случайных комбинациях ширины и веса

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

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

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

Псевдоэлементы ::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

Правильный!

Ресурсы

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