Подкаст CSS – 036: Текст и типографика
Текст — один из основных строительных блоков Интернета.
При создании веб-сайта вам не обязательно стилизовать текст; В HTML на самом деле есть довольно разумные стили по умолчанию.
Однако текст, скорее всего, будет составлять большую часть вашего веб-сайта, поэтому стоит добавить немного стиля, чтобы украсить его. Изменив несколько основных свойств, вы можете значительно улучшить качество чтения для своих пользователей!
В этом модуле мы сначала рассмотрим некоторые фундаментальные свойства шрифтов CSS, такие как font-family
, font-style
, font-weight
и font-size
. Затем мы углубимся в свойства, влияющие на абзацы текста, такие как text-indent
и word-spacing
. Модуль завершается некоторыми более сложными темами, такими как переменные шрифты и псевдоэлементы.
Изменить шрифт
Используйте 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 Основные стили текста и шрифтов .