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

Рассмотрим в этой статье как можно управлять шрифтом на веб-страничке. Начнем с одного из самых важных свойств - свойство font-family. Свойство font-family определяет гарнитуру шрифта. В качестве значения этого свойства нужно указывать имя гарнитуры шрифта и/или имя общедоступной гарнитуры. Можно указывать несколько имен гарнитур шрифта и имен общедоступных гарнитур, так как у пользователя на компьютере может не оказаться какого-либо шрифта. Перечислять их нужно через запятую, в порядке уменьшения приоритета. Имена гарнитур шрифтов, содержащие пробелы нужно записывать в кавычках. Например

Существуют следующие общедоступные гарнитуры

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

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

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

Третий способ - это использование относительных значений bolder и lighter, которые соответственно увеличивают и уменьшают насыщенность относительно шрифта родителя. Например

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

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

Свойство font-style задает вид начертания шрифта, может принимать следующие значения

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

Например

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

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

Например