CSS-свойства для шрифтов

Шрифт в английском языке переводится как font или type. Первый вариант перевода мы будем использовать для  различных css-свойств, которые позволяют управлять шрифтами на html-странице, а второй, как правило, обозначает инструмент Текст в Photoshop или в Figma, и формирует такой известный термин, как типографика (typography), т.е. наука о шрифтах.

Рассмотрим шрифтовые свойства в CSS.

1. Свойство color - цвет шрифта
2. Свойство font-family - семейство шрифта
3. Свойство font-size - размер шрифта
4. Свойство line-height - высота строки
5. Свойство font-weight - насыщенность, или жирность шрифта
6. Свойство font-style - начертание, или наклон шрифта
7. Свойство font-synthesis
8. Свойство font-variant - вид строчных букв
9. Свойство font - составное свойство для шрифта
10. Свойство font-stretch - ширина шрифта
11. Свойство font-size-adjust - относительный размер шрифта

Свойство color - цвет шрифта

Свойство color меняет цвет шрифта со стандартного черного на любой заданный вами или на прозрачный (transparent).

Цвет текста влияет не только на сам текст, но и на

• цвет рамки
• цвет линии подчеркивания
• маркеры списка

Наследование свойств. Значение inherit и initial

Должно быть, вы заметили, что в примере есть абзац с текстом родительского элемента, для которого вы можете задать цвет, нажав на одну из ссылок. После этого весь текст примера окрасится в соответствующий цвет. В этом и заключается наследование css-свойств. Если какое-либо свойство назначено для родительского элемента, оно, как правило, касается и вложенных, или дочерних элементов. Для дочерних элементов можно назначить другие значения наследуемых свойств, но в том случае, если вы хотите использовать значение свойства родительского элемента, следует установить значение inherit. Учтите, что использовать его просто так не стоит. Это значение имеет смысл в том случае, если для дочерних элементов назначалось какое-то другое значение, но в какой-то момент нужно вернуться к тому значению, которое было у родителя.

Значение initial возвращает элементу значение по умолчанию, которое установлено настройками браузера или его таблицей стилей.

Свойство font-family - семейство шрифта

Свойство font-family используется для выбора семейства шрифта, т.е. набора символов с определенным названием, которые в операционной системе пользователя представлены одним или несколькими файлами шрифта. Свойство предполагает, что вы можете перечислить через запятую несколько вариантов шрифтов, с помощью которых должен отображаться текст на вашей html-странице. Так как неизвестно, установлен ли указанный вами шрифт на компьютере посетителя вашего сайта, то желательно прописывать несколько вариантов однотипных шрифтов. Браузер будет проверять их наличие в ОС пользователя в той последовательности, в которой вы их указали в свойстве font-family, пока не найдет нужный.

Если в имени шрифта имеются пробелы или символы (например, #, $, %), то оно заключается в кавычки. Это делается для того, чтобы браузер мог понять, где начинается и заканчивается название шрифта. То есть шрифт Times New Roman, состоящий из 3-х слов с пробелами, необходимо указать, как ' Times New Roman'. Кавычки могут быть одинарными или двойными, это не меет значения, главное, чтобы они были одинаковыми

Свойство font-family  наследуется от родительского элемента, поэтому можно указывать его для body, чтобы определить в качестве основного для текста страницы.

font-family
Значения:	Описание
family-name	Название (имя) семейства шрифтов, например, Lato, 'Times New Roman', "Courier New", Tahoma,  Arial. Рекомендуется указывать вместе с базовым семейством.
generic - шрифт-псевдоним	Шрифты-псевдонимы, или базовое семейство шрифта - это общее название шрифтов, которые имеют общие характеристики: засечки или наклонное начертание. Бывают 5 видов: Шрифты с засечками — serif (Times New Roman, Times, Garamond, Georgia) Рубленые шрифты — sans-serif (Helvetica, Geneva, Arial, Verdana, Trebuchet, Univers) Моноширинные шрифты — monospace (Courier, Courier New, Andele Mono) Рукописные шрифты — cursive (Comic Sans, Gabriola, Monotype Corsiva, Author, Zapf Chancery) Аллегорические шрифты - fantasy (Western, Woodblock, Klingon)
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Варианты записи font-family:

Кстати, в большинстве текстовых редакторов, которыми вы можете воспользоваться для редактирования HTML и CSS, есть плагин Emmet, в в Emmetе есть целый ряд аббревиатур для вставки различных значений свойства font-family:

Как работают эти аббревиатуры в редакторе Visual Studio Code можно посмотреть ниже:

Протестируйте назначение шрифтов с помощью свойства font-family на примере:

В каждом браузере есть настройки для шрифтов, которые вы можете изменить под себя. Именно здесь указывается шрифт по умолчанию, который берется из системы в качестве шрифта-псевдонима. В браузере Chrome они выглядят так:

Здесь же вы можете настроить размер каждого шрифта.

Свойство font-size - размер шрифта

Свойство font-size определяет размер, или кегль шрифта. Имеет довольно много вариантов значений, представленных в таблице ниже.

Свойство наследуется от родительского элемента.

Давайте рассмотрим примеры того, как записывается это свойство в CSS:

На примере ниже вы можете самостоятельно попробовать перечисленные выше варианты. Обязательно обратите внимание на то, что в родительском элементе было назначено свойство font-size: 18px. Это свойство наследуется вложенным элементом <div id="fsz" class="test"> с 2-мя абзацами. Разметка примера такова:

Почему это важно? Абсолютные значения font-size будут одинаковыми для элементов с любым начальным размером шрифта, а относительные будут зависеть от размеров родительского элемента. Кроме того, от размеров родителя зависят значения в % и em, т.к. по сути это одно и то же, но % указываются как 200% для увеличения размера шрифта текущего элемента в 2 раза, а 2em задаются в виде коэффициента увеличения.

К относительным единицам также отправились vw и vh, т.к. они зависят от размеров области просмотра (viewport width и viewport height, соответственно). Измените размер своего браузера - и увидите, как меняются значения.

Свойство line-height - высота строки

Свойство line-height определяет минимальную высоту строки текста. В типографике соответствует параметру интерлиньяж. Это довольно важное свойство, т.к. с его помощью можно уменьшить или увеличить расстояния между строками для лучшкго восприятия текста.

Возможные значения line-height:

Свойство наследуется от родительского элемента.

Протестируйте различные варианты свойства line-height на примере:

В статье "Центрирование элементов в CSS" вы можете посмотреть способ вертикального центрирования текста с помощью свойства line-height.

Свойство font-weight - насыщенность, или жирность шрифта

Это свойство определяет вес, или толщину букв. Аналог этого свойства в текстовых редакторах типа Microsoft Word - это жирность шрифта. С точки зрения CSS с помощью свойства font-weight вы указываете браузеру, насколько толстым или тонким должен быть шрифт.

Это свойство наследуется, т.е. если для родительского элемента задано значение bold (полужирное начертание), то и все дочерние, или вложенные элементы тоже будут иметь такое начертание. Поэтому в CSS также предусмотрены значения bolder lighter, которые отталкиваются от значения font-weight у родительского элемента и делают шрифт более жирным (bolder) или менее жирным (lighter)  по сравнению со значением font-weight родителя.

В том случае, если вложенным элементам нужно вернуть нормальное начертание, нужно использовать значение normal или initial, или указать вес шрифта как 400.

Итак, доступные значения свойства font-weight:

Примеры использования значений font-weight в CSS:

Браузеры при любом указанном вами варианте определяют насыщенность шрифта в единицах, которые имеют значения от 100 до 900 с шагом 100 и соответствуют определенным наименованиям шрифтов с точки зрения их наличия в операционной системе пользователя или загружаемых извне.

Попробуйте различные варианты свойства font-weight самостоятельно. Обязательно измените значения для родительского элемента, кликнув на ссылки, чтобы увидеть, как работают значения bolder и lighter.

В таблице ниже приведены значения шрифта от 100 до 900, их названия согласно документации на MDN (рус. | англ.) и их внешний вид для шрифта Montserrat, который используется в примерах для этой статьи. Здесь четко видно, как тонкий шрифт со значением 100 постепенно "утолщается" для каждого следующего значения.

Важно понимать, что далеко не у всех шрифтов есть все 9 начертаний, представленных в таблице. Каждому шрифту должен соответствовать файл шрифта, который должен находится в вашей ОС в папке Fonts или загружаться из какой-либо папки на сайте. Иначе вы не сможете заметить различий между некоторыми значениями просто потому, что соответствующий файл для этого шрифта просто не предусмотрен автором-разработчиком шрифта.

Учтите, что для некоторых шрифтов существует всего один файл (чаще всего это рукописные или фантазийные шрифты), для других - 2-4 файла шрифта (обычно Regular, Italic, Bold и Bold Italic), и только небольшая часть имеет все 9 вариантов насыщенности + еще 9 для курсивного начертания.

Значение	Название файла шрифта	Отображение шрифта Montserat
100	Thin (Hairline)/ Тонкий (Волосяной)
200	Extra Light (Ultra Light)/ Дополнительный светлый (Сверхсветлый)
300	Light/ Светлый
400	Normal (Regular)/ Средний
500	Medium/ Нормальный
600	Semi Bold (Demi Bold)/ Полужирный
700	Bold/ Жирный
800	Extra Bold (Ultra Bold)/ Дополнительный жирный (Сверхжирный)
900	Black (Heavy)/  Чёрный (Густой)

Свойство font-style - начертание, или наклон шрифта

Свойство font-style управляет стилем начертания шрифта. Два основных значения, используемые для font-style - это italic и oblique, курсив и наклонное начертание шрифта.  Разница между ними заключается в том, что курсив вносит небольшие изменения в структуру каждого символа и связан с наличием в операционной системе или на сайте файла шрифта, в то время как наклонное начертание представляет собой наклонную версию прямого шрифта и реализуется средствами браузера. В реальности браузеры на данный момент отображают оба этих значения свойства font-style одинаково.

Давайте посмотрим, как выглядят слова с различным начертанием для шрифта с засечками Lora.

Свойство наследуется от родительского элемента, т.е. если у родителя назначено курсивное начертание, то такое же начертание "достанется" всем вложенным элементам. Для того чтобы вернуть им нормальное начертание, нужно использовать значение normal или initial.

Значения свойства font-style:

Тестируем варианты назначения свойства font-style в примере ниже. Обратите внимание на ссылку в правом углу с текстом "Загрузить шрифты italic". Без загрузки шрифтов с курсивным начертанием мы получаем наклонное отображение букв, которое может выполнить браузер своими средствами. И только загрузив нужные файлы шрифтов, мы видим курсивное начертание букв. Лучше всего это видно на примере шрифтов с засечками, т.к. шрифты без засечек отображаются примерно одинаково как при загрузке шрифтов, так и без нее.

Свойство font-synthesis - управление синтезом шрифтов для наклонного или полужирного начертания

Свойство font-synthesis связано с предыдущими двумя свойствами. Оно определяет, разрешено ли браузерам синтезировать полужирное или наклонное начертание шрифтов, когда они отсутствуют в семействе шрифтов, т.е. в нужный файл шрифта в операционной системе пользователя или в папке на сайте не найден. Если weight не указан, то браузеры не должны синтезировать полужирное начертание, а если не указан style, браузеры не должны синтезировать курсив.

Свойство наследуется от родительского элемента.

Варианты использования значений свойства в CSS:

Попробуйте установить значение none для свойства font-syntesis и сделать текст абзацев жирным или курсивным.

Свойство font-variant - вид строчных букв

Значениями для свойства font-variant являются normal (обычный регистр строчных символов, по умолчанию) или small-caps (капитель - все строчные символы выглядят как заглавные, но с уменьшением их размера).

Свойство font - сокращенная запись всех свойств шрифта

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

Все подсвойства свойства font сначала сбрасываются на свои начальные значения, включая перечисленные выше, плюс font-size-adjust, font-kerning, все подсвойства font-variant и настройки шрифтов, за исключением font-synthesis. Затем этим свойствам присваиваются те значения, которые указаны в свойстве font. Для свойства font-size-adjust невозможно установить значение, отличное от его начального значения, поэтому следует использовать вместо этого индивидуальное свойство. Если явное значение какого-либо свойства не нужно, то оно опускается.

Свойство наследуется.

Варианты написания свойства:

В качестве значений в составном свойстве font можно использовать ключевые слова, определяющие шрифт различных элементов операционной системы пользователя:

• caption — шрифт, используемый для элементов управления с субтитрами (например, кнопок, раскрывающихся списков и т.д.).
• icon — шрифт для текста под иконками.
• menu — шрифт, используемый в меню (например, раскрывающиеся меню и списки меню).
• message-box — шрифт для диалоговых окон.
• small-caption — шрифт для подписей к небольшим элементам управления.
• status-bar — шрифт, используемый в строке состояния окна.

Системные шрифты могут быть установлены только целиком; то есть семейство шрифтов, размер, вес, стиль и т.д. задаются одновременно. Эти значения затем могут быть изменены индивидуально, если это необходимо. Ключевые слова, используемые для системных шрифтов, перечисленных выше, обрабатываются как ключевые слова только в том случае, если они находятся в начальной позиции, в других позициях эта же строка обрабатывается как часть имени семейства шрифтов. Системные шрифты могут быть указаны только с этим свойством, но не с самим font-family.

Свойство font-stretch - ширина шрифта

Свойство font-stretch позволяет выбрать нормальное (normal), сжатое (condensed) или расширенное (expanded) начертание символа из семейства шрифтов. При том, что свойство имеет много вариантов значений, реальное его применение очень ограничено. Совсем не факт, что оно будет работать на том шрифте, который вы выбрали, так как для изменения ширины шрифта нужен файл с  соответствующим начертанием и названием. Поскольку таких шрифтов крайне мало, то и реальное использование этого свойства весьма ограничено. Один из выходов - использовать вариативные шрифты (variables fonts), но и в них не всегда будут все нужные вам варианты.

Свойство наследуется от родителя.

Значения являются абсолютными и представлены в виде ключевых слов от самого узкого шрифта до самого широкого:

Как должны выглядеть буквы с различными значениями  font-stretch:

В примере ниже подключены 3 шрифта: normal (regular), condensed и semi-expanded, поэтому эти пункты выделены красным. Все остальные варианты будут подтягивать внешний вид подобного шрифта, поэтому изменений вы не увидите, хоть расчетное значение ширины шрифта в браузере и будет меняться в зависимости от выбранного пункта тестового примера.

Свойство font-size-adjust - относительный размер шрифта

Для любого заданного размера шрифта явный размер и четкость текста варьируется в зависимости от шрифта. Для таких шрифтов, как латиница или кириллица, которые различают прописные и строчные буквы, относительная высота строчных букв по сравнению с их прописными аналогами является определяющим фактором удобочитаемости. Это обычно называют значением аспекта. Точно определенный, он равен x-height шрифта, разделенной на размер шрифта.

В ситуациях, когда для шрифта указано несколько семейств шрифтов, резервные шрифты могут не использовать то же значение аспекта, что и желаемое семейство шрифтов, и, следовательно, будут казаться менее четкими.

Свойство font-size-adjust — способ сохранить читабельность текста при использовании резервных шрифтов. Это достигается путем настройки размера шрифта таким образом, чтобы x-height была одинаковой независимо от используемого шрифта.

Свойство наследуется.

Варианты значений:

В примере вы можете протестировать с помощью кнопки работу этого свойства с загруженным дополнительным шрифтом из коллекции  GoogleFonts по сравнению со стандартным шрифтом Georgia.

See the Pen by Elen (@ambassador) on CodePen.

Свойства шрифта в спецификации CSS