✎ Помощь начинающим и профессиональным блоггерам, создание, поддержка сайтов и блогов e-mail siteblogger@inbox.ru icq 353-724-370

Главная ›› Уроки по CSS, CSS3 ›› Свойства шрифта в CSS

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

В каскадных таблицах стилей CSS предусмотрено множество возможностей для придания шрифту конкретного стиля. Стиль шрифта в 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. Эти свойства часто используют при создании сайта, поэтому знать о их существовании и правилах формировании не помешает.

Поделитесь ссылкой! Подпишитесь на обновления, чтобы получать новые публикации!

Оставить комментарий

Siteblogger.ru – проект, охватывающий достаточно широкий круг вопросов: создание сайтов и блогов на WordPress, поисковые системы, поисковая оптимизация и продвижение сайтов, способы заработка в сети, эффективные инструменты работы в Интернете и другое. Кроме того, мы оказываем услуги создания сайтов и блогов на WordPress с последующим их продвижением, а также занимаемся настройкой и ведением контекстной рекламы Яндекс.Директ и Google Adwords. По поводу сотрудничества просьба обращаться через контакты, все заявки и предложения будут обязательно рассмотрены. При использовании материалов данного сайта, пожалуйста, указывайте прямую индексируемую ссылку на Siteblogger.ru.

«Как создать и продвинуть свой сайт»

2011–2016 © Siteblogger.ru
Рейтинг@Mail.ru