В каскадных таблицах стилей CSS предусмотрено множество возможностей для придания шрифту конкретного стиля. Стиль шрифта в CSS формируется с помощью свойств и значений. Основные свойства шрифтов, а также их атрибуты мы и рассмотрим в данном уроке.
Итак, рассмотрим свойства шрифта в CSS:
1. font-family — определяет семейство и вид шрифта:
1) serif — это шрифты с засечками (Times New Roman, Times, Garamond);
2) sans-serif — рубленные шрифты или шрифты без засечек (Verdana, Arial,Tahoma, Helvetica);
3) cursive — курсивные шрифты (Zapf-Chancery, Comic Sans MS);
4) fantasy — декоративные шрифты (Alpha Geometrique, Western);
5) monospace — моноширинные шрифты (Courier New, Courier, Monaco).
Пример:
p {font-family: Verdana, Arial, sans-serif;}
Результат: шрифт для абзаца, соответственно, Verdana или Arial, или sans-serif.
2. font-weight — определяет насыщенность шрифта:
- bold — полужирное начертание;
- bolder — жирное начертание;
- lighter — светлое начертание;
- normal — нормальное начертание.
Пример:
p {font-weight: normal;}
Результат: нормальное начертание шрифта абзаца.
3. font-size — устанавливает размер шрифта в пикселях или в процентах.
Пример:
p {font-size: 14px;}
h1 {font-size: 100%}
.text {font-size: 12px}
Результат: задаем размер шрифта, соответственно, для параграфа, заголовка и текста.
4. font-style — определяет стиль шрифта:
- normal — обычное начертание текста;
- italic — курсивное начертание;
- oblique — наклонное начертание (образуется путем наклона обычных знаков вправо);
- inherit — наследует значение родителя.
Пример:
p {font-style: italic;}
.kursiv {font-style: italic;}
Результат: курсивный шрифт для абзаца.
5. font-variant — также определяет стиль шрифта.
- normal — оставляет регистр символов исходным, заданным по умолчанию;
- small-caps — модифицирует все строчные символы как заглавные уменьшенного размера;
- inherit — наследует значение родителя.
Пример:
p {font-variant: small-caps;}
.normal {font-variant: normal;}
Результат: текст абзаца маленькими прописными символами, остальной текст без изменений.
Таким образом, мы рассмотрели основные свойства шрифта в CSS. Эти свойства часто используют при создании сайта, поэтому знать о их существовании и правилах формировании не помешает.
