Свойства шрифта в CSS

Урок №5

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

Кроссбраузерность- это возможность какого либо элемента, одинаково отображаться во всех имеющихся в интернете браузерах.

Свойства шрифта CSS позволяют вам устанавливать различные стили для шрифтов, такие как семейство шрифтов, размер и жирность, вариант и многое другое.

Большинство текстовых элементов по умолчанию имеют шрифт Times New Roman. В CSS есть возможность установить другие шрифты. Также в CSS можно подключить шрифт, который изначатьно не был предусмотрен в браузерах.

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

Cвойства шрифта в CSS:

Шрифты подразделяются на семейства.

Пример:

p {font-family: Verdana, Arial, sans-serif;}

Результат: шрифт для абзаца, Verdana или Arial, а также sans-serif.

font-size

Пример:

p { font-size: 16px; }

Это свойство регулирует размер.
Имейте в виду, что установка размера шрифта 16px не делает каждую букву высотой 16px. Фактический размер каждой буквы зависит от используемого font-family.

font-style

Пример:

h2 { font-style: italic; }

Это свойство может сделать ваш текст курсивным. Значение по умолчанию — font-style: normal.

font-weight

Пример:

h2 { font-weight: bold; }

Это свойство может сделать ваш текст жирным. Значение по умолчанию — font-weight: normal.

font-variant

Пример:

h2 { font-variant: small-caps; }

Это свойство превратит ваш текст в капитель. Значение по умолчанию — font-weight: normal.

Это свойство используется крайне редко.

CSS для шрифтов

Задаются шрифты при помощи свойства CSS font-family, а в значении указывается название шрифта.

Задать шрифт и его оформление можно как в файле style.css, так и непосредственно в теге элемента.

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

В style.css
p{
  font-family: "Monotype Corsiva" Cursive;
В теге
<p style="font-family: "Monotype Corsiva" Cursive;">Текст
}

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

Безопасные шрифты

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

Шрифты, которые отображаются на всех компьютерах и во всех браузерах, называются безопасными. Считается, что абсолютно безопасных нет. Но всё же, существует ряд шрифтов, которые есть у абсолютного большинства пользователей. Далее приведены безопасные шрифты с указанием их семейства.

  Таким образом, мы рассмотрели основные свойства шрифта в CSS. Эти свойства часто используют при создании сайта, поэтому знать о их существовании и правилах формировании очень важно.

       

Создано: 23.05.2020.|Обновлено: 15.12.2022.