--- title: Fonts localeTitle: Шрифты --- ## Шрифты Свойства шрифта CSS определяют семейство шрифтов, вес, размер, вариант, высоту строки и стиль текста. ### Семейство шрифтов Семейство шрифтов текста просто устанавливается с использованием свойства `font-family` . Он работает с _резервной_ системой, если ваш браузер не поддерживает первый шрифт, он пытается со следующим и так далее. Если имя шрифта более одного слова, оно должно быть окружено кавычками. ```css p { font-family: "Times New Roman", Times, serif; } ``` В приведенном выше примере «Times New Roman» является шрифта, а «serif» - это , В качестве резервной копии используются общие имена механизм сохранения стиля, если фамилия недоступна. Общее имя всегда должно быть последним элементом в списке имен семейств шрифтов. общий фамилии - засечка, без засечек, моноширины, скоропись, фэнтези, система-ui. ### Стиль шрифта Свойство `font-style` можно использовать для указания курсивного текста. Это свойство имеет 3 значения: * normal - текст отображается нормально * курсив - текст, _выделенный курсивом_ * наклонный - текст показан наклонным ```css .normal { font-style: normal; } .italic { font-style: italic; } .oblique { font-style: oblique; } ``` ### Размер шрифта Свойство `font-size` задает размер текста. Существуют различные типы значений размера шрифта: * `px` (pixels) - размер текста по умолчанию `16px` * `em` - `1em` = текущий размер шрифта, поэтому `1em` = `16px` (рекомендуется W3C) * `small` , `medium` , `large` - известные как абсолютные величины * `%` - проценты ```css .with-pixels { font-size: 14px; } .with-ems { font-size: 0.875em; } .with-absolute { font-size: large; } .with-percentage { font-size: 80%; } ``` ### Вес шрифта Свойство `font-weight` определяет вес (или смелость) шрифта. Принимает ключевые слова ( `bold` , `normal` , `bolder` , `lighter` ) или числовые ключевые слова ( `100` , `200` , `300` , `400` и т. Д.). `400` - это то же самое, что и в `normal` . ```css p { font-weight: bold } ``` Для отптимизации CSS используют вариант сокращенной записи ```css font: italic small-caps lighter 14px Georgia, serif; ``` ### Отзывчивость шрифта Размер текста можно установить с помощью блока vw (ширина видового экрана). Таким образом, размер текста будет соответствовать размеру окна браузера. ```html