Стилевые свойства шрифта

Рассмотрим в этой статье как можно управлять шрифтом на веб-страничке. Начнем с одного из самых важных свойств - свойство font-family. Свойство font-family определяет гарнитуру шрифта. В качестве значения этого свойства нужно указывать имя гарнитуры шрифта и/или имя общедоступной гарнитуры. Можно указывать несколько имен гарнитур шрифта и имен общедоступных гарнитур, так как у пользователя на компьютере может не оказаться какого-либо шрифта. Перечислять их нужно через запятую, в порядке уменьшения приоритета. Имена гарнитур шрифтов, содержащие пробелы нужно записывать в кавычках. Например
Код
div { font-family: Arial, "Times New Roman", sans-serif; }

Существуют следующие общедоступные гарнитуры
  • serif - антиква;
  • sans-serif - гротески;
  • cursive - курсивы;
  • fantasy - аллегорические;
  • monospace - моноширинный шрифт.

Свойство font-weight задает насыщенность шрифта. Задать насыщенность можно несколькими способами. Первый способ - это использование ключевых слов normal и bold, которые задают соответственно нормальное и полужирное начертание шрифта. Например
Код
div { font-weight: bold; }

Второй способ: указать значение начертания одним числом из девяти от 100 до 900 (то есть 100, 200, 300 и т.д.). Причем значение 400 соответствует начертанию normal, а значение 700 соответствует начертанию bold. Например
Код
span { font-weight:500; }

Третий способ - это использование относительных значений bolder и lighter, которые соответственно увеличивают и уменьшают насыщенность относительно шрифта родителя. Например
Код
span, div { font-weight: bolder; }

Свойство font-size задает размер шрифта. Размер шрифта можно задать несколькими способами. Можно задать размер в пикселях (например, 7px, 12px, 17px), в процентном отношении относительно размера шрифта родительского элемента (80%, 120%), относительными значениями larger и smaller, которые соответственно увеличивают и уменьшают размер шрифта, унаследованный от шрифта родительского элемента. Например
Код
div { font-size:12px; }
span { font-size:120%; }
p { font-size:larger; }

Можно указать одно из семи значений xx-small, x-small, small, medium, large, x-large, xx-large. Думаю понятно, что значение xx-small соответствует наименьшему размеру шрифта, xx-large соответствует максимальному размеру шрифта, а остальные задают соответствующие размеры. Например
Код
div { font-size: xx-small; }

Свойство font-style задает вид начертания шрифта, может принимать следующие значения
  • normal - задает обычный вид шрифта (значение по умолчанию);
  • italic - задает курсивное начертание шрифта;
  • oblique - задает наклонное начертание шрифта.

Например
Код
div { font-style: italic; }

Очень часто браузеры при указании значения oblique отображают шрифт курсивом, так как просто может не быть в шрифте данного начертания.
Есть еще одно замечательное свойство font-variant, которое задает вид строчных букв текста элемента. Может принимать следующие значения
  • normal - задает обычный вид строчных букв текста (значение по умолчанию);
  • small-caps - выводит шрифт, содержащий строчные буквы в виде уменьшенного размера прописных букв (капитель).

Например
Код
div { font-variant: small-caps; }
Опубликовано 29 июня 2008 г.
Теги: css, font, div
Комментарии к публикации
Всего комментариев: 3
прохожий: Врстальщик | 23.07.2010, 01:49 #
сайт: www.stgrupp.ru
Про то, что числом можно задавать жирный шрифт или нормальный - не знал, использовал bold или bolder для этого.
прохожий: Никита | 11.08.2010, 07:03 #
Размер шрифта всё таки как лучше задавать фиксированный или чтобы масштабировался?
Суперадмин: | 04.09.2010, 20:20 #
Решайте сами! :)
Вход в аккаунт
Новости сайта