Подкаст 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 недоступен.
Изменить шрифт
Используйте 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
. Проверьте ссылки на каждое свойство для получения более подробной информации о его использовании.
Проверьте свое понимание
Проверьте свои знания типографики в Интернете
Какое из следующих ключевых слов можно использовать в качестве общего резервного варианта font-family
?
serif
sans-serif
monospace
helvetica
sci-fi
italic
Какой оператор используется для преобразования первой буквы каждого слова в верхний регистр? например, This is a sentence.
➡ This Is A Sentence.
text-case: capitalize;
text-capitalize: true;
text-transform: capitalize;
font-style: capitals;
font-variant: capitalize;
Верно или неверно: используйте text-orientation
, чтобы выровнять текст по левому, правому или центру.
Какое свойство CSS можно использовать для изменения расстояния между строками текста?
line-spacing
leading
baseline-distance
line-height
Ресурсы
- Рекомендации по использованию шрифтов посвящены импорту шрифтов, рендерингу шрифтов и другим рекомендациям по использованию шрифтов в Интернете.
- MDN Основные стили текста и шрифтов .