Подкаст 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
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
baseline-distance
line-height
Ресурсы
- Рекомендации по использованию шрифтов посвящены импорту шрифтов, рендерингу шрифтов и другим рекомендациям по использованию шрифтов в Интернете.
- MDN Основные стили текста и шрифтов .